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

 h('.blocks', model.blocks.map(block => (
     h('.block', [
         block.title ? h('h5.block-title.small-island', block.title) : null as any,
         h('.element-groups', (
             // TODO: Use discriminated union instead, remove any
             block.elementGroups.map((elementGroup): any => {
                 if (elementGroup instanceof ImageSquarePairGroup) {
                     return h('.element-group', { className: 'image' },
                         elementGroup.elements
                             .map(renderImage)
                     );
                 } else if (elementGroup instanceof ImageGroup) {
                     return h('.element-group', { className: 'image' },
                         [elementGroup.element]
                             .map(renderImage)
                     );
                 } else if (elementGroup instanceof TextGroup) {
                     return h('.element-group', { className: 'text' }, [
                         h('.text-element.spaced-items', { innerHTML: elementGroup.element.body }, [])
                     ]);
                 }
             })
         ))
     ])
 )))

 private static renderForm(defaultText: string): VNode {
     return h("div", { className: "js-post-form" }, [
         h(
             "form",
             {
                 className: "form",
                 dataset: {
                     topicInlineReply: true,
                 },
             },
             [
                 h("div", { className: "container" }, [
                     h("div", { className: "form-item" }, [
                         PostForm.renderBodyFormItemLabel(),
                         PostForm.renderBodyFormItemInput(defaultText),
                     ]),
                     h("div", { className: "form-item" }, [
                         PostForm.renderPostFormItemButton(),
                         " ",
                         PostForm.renderPostFormItemBump(),
                     ]),
                 ]),
             ],
         ),
     ]);
 }

    public render(
        node: Node,
        configuration: ISequenceConfiguration,
        containerWidth: number,
        component: SequenceComponent,
        interaction: SequenceDOMInteraction,
        navigator: Navigator): vd.VNode {

        if (configuration.visible === false) {
            return vd.h("div.SequenceContainer", {}, []);
        }

        let nextKey: string = null;
        let prevKey: string = null;

        for (let edge of node.edges) {
            if (edge.data.direction === EdgeDirection.Next) {
                nextKey = edge.to;
            }

            if (edge.data.direction === EdgeDirection.Prev) {
                prevKey = edge.to;
            }
        }

        let playingButton: vd.VNode = this._createPlayingButton(nextKey, prevKey, configuration, component);
        let arrows: vd.VNode[] = this._createSequenceArrows(nextKey, prevKey, node, configuration, interaction, navigator);

        let containerProperties: vd.createProperties = {
            style: { height: (0.27 * containerWidth) + "px", width: containerWidth + "px" },
        };

        return vd.h("div.SequenceContainer", containerProperties, arrows.concat([playingButton]));
    }

    private _createPlayingButton(
        nextKey: string,
        prevKey: string,
        configuration: ISequenceConfiguration,
        component: SequenceComponent): vd.VNode {

        let canPlay: boolean = configuration.direction === EdgeDirection.Next && nextKey != null ||
            configuration.direction === EdgeDirection.Prev && prevKey != null;

        let onclick: (e: Event) => void = configuration.playing ?
            (e: Event): void => { component.stop(); } :
            canPlay ? (e: Event): void => { component.play(); } : null;

        let buttonProperties: vd.createProperties = {
            onclick: onclick,
            style: {

            },
        };

        let iconClass: string = configuration.playing ?
            "Stop" :
            canPlay ? "Play" : "PlayDisabled";

        let icon: vd.VNode = vd.h("div.SequenceComponentIcon", { className: iconClass }, []);

        let buttonClass: string = canPlay ? "SequencePlay" : "SequencePlayDisabled";

        return vd.h("div." + buttonClass, buttonProperties, [icon]);
    }

    const renderGroupDeployNodes = (groupDeploys: List<DeployRecord>, deployGroup: DeployGroupRecord) => {
        const shouldShowProjectNames = !groupDeploys.equals(currentDeploys);

        return h(
            'li',
            { className: `deploy deploy--${deployGroup.status.split(' ').join('-').toLowerCase()}` },
            [
                h('h2', [
                    h('a', { href: createBuildLink(deployGroup.build) }, `${deployGroup.build}`)
                ]),
                // Only show project names if we have multiple deployed groups
                exp(shouldShowProjectNames) && ih('ul', {}, groupDeploys
                    .sortBy(build => build.projectName)
                    .map(deploy => {
                        const previousBuild = previousDeploysMap.get(deploy);
                        return h('li', [
                            h('a', {
                                href: createRiffRaffDeployLink(deploy.uuid),
                                title: previousBuild ? `Previous build: ${previousBuild.build}` : ''
                            }, deploy.projectName)
                        ]);
                    })
                    .toList()
                )
            ]
        );
    };

 private static renderDate(topic: Topic): VNode {
     let postedAt = new Date(topic.postedAt);
     let formatter = formatDate(postedAt);
     return h("p", { className: "topic-header-item" }, [
         "Last posted ",
         h("strong", {}, [formatter]),
     ]);
 }

 posts.map((post: Post): VNode => {
     return h("div", { className: "post" }, [
         h("div", { className: "container" }, [
             PostCollectionView.renderHeader(post),
             PostCollectionView.renderBody(post),
         ]),
     ]);
 }),

 private static renderBoard(board: Board): VNode {
     return h("div", { className: "js-board" }, [
         h("div", { className: "cascade" }, [
             h("div", { className: "container" }, [
                 BoardView.renderTitle(board),
                 BoardView.renderDescription(board),
             ]),
         ]),
     ]);
 }

let myForm = (store: Store<MyFormState, MyFormAction>) => {
  return h("div#myform", [
    h("input", {
      onkeyup: (event) => {
        store.dispatch(event.target.value || "")
      }
    }, store.state),
    h("span", store.state)
  ]);
}