TypeScript virtual-dom.create函數代碼示例

export const mount = <Stores>(
  render: (any) => VNode,
  stores: Stores,
  element: HTMLElement) => {
  element.innerHTML = "";
  let tree = render(stores);
  let rootNode = create(tree);
  element.appendChild(rootNode);
  
  for(let storeName of Object.keys(stores)){
    stores[storeName].subscribe(() => {
      let newTree = render(stores);
      let patches = diff(tree, newTree);
      rootNode    = patch(rootNode, patches);
      tree        =  newTree;
    })
  }
}

    private appendPosts(): void {
        let newCollectionNode = new PostCollectionView(this.loadedPosts).render();

        if (!this.collectionElement) {
            this.collectionElement = create(newCollectionNode);
            let postElements = this.element.querySelectorAll(".post");
            let lastElement = postElements[postElements.length - 1];
            if (lastElement && lastElement.parentElement) {
                lastElement.parentElement.insertBefore(
                    this.collectionElement,
                    lastElement.nextSibling,
                );
            }
        } else {
            let patches = diff(this.collectionNode, newCollectionNode);
            this.collectionElement = patch(this.collectionElement, patches);
        }

        this.collectionNode = newCollectionNode;
    }

/// <reference path="../typings/tsd.d.ts" />
/// <reference path="../manual-typings/vdom-virtualize.d.ts" />
/// <reference path="../manual-typings/immutable.d.ts" />
/// <reference path="../manual-typings/custom-window.d.ts" />
/// <reference path="../jspm_packages/npm/monapt@0.5.0/dist/monapt.d.ts" />

import { VPatch, diff, patch, h, create } from 'virtual-dom';
import { List, Map, Record, Iterable } from 'immutable';
import renderPage from './render';
import { getDeploys, getBuild, getDifference } from './api';
import { DeployRecord } from './model';
import { getMostRecentDeploys } from './model-helpers';

let currentTree = h('div', {}, []);
let rootNode: Element = create(currentTree);
document.body.appendChild(rootNode);

const updateDom = (newTree: VirtualDOM.VNode): void => {
    const patches: VPatch[] = diff(currentTree, newTree);
    rootNode = patch(rootNode, patches);
    currentTree = newTree;
};

const run = (): Promise<void> => {
    // We only care about servers which are deployed frequently and manually
    // with goo
    const serverWhitelist = List([
        'admin',
        'applications',
        'archive',
        'article',

import { Option, Some, None } from 'monapt';

const headOption = <A>(array: Array<A>): Option<A> => Option(array[0]);

const { fetch } = window;

// https://github.com/Matt-Esch/virtual-dom/issues/276
const ih =
    (tagName: string,
     options: VirtualDOM.createProperties,
     children: List<VirtualDOM.VNode>): VirtualDOM.VNode => (
        h(tagName, options, children.toJS())
    );

let currentTree = h('div', {}, []);
let rootNode = create(currentTree);
document.body.appendChild(rootNode);

const updateDom = (newTree: VirtualDOM.VNode): void => {
    const patches = diff(currentTree, newTree);
    rootNode = patch(rootNode, patches);
    currentTree = newTree;
};

// A started deploy is all except status "Not running"
// This is because a deploy is not transactional, so we can't
// be sure if the box has updated or not once the job has started.
const hasDeployStarted = (deploy: DeployRecord) => deploy.status !== 'Not running';

const getStartedDeploysFor = (projectName: String, deploys: List<DeployRecord>) => (
    deploys