TypeScript virtual-dom.h函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中virtual-dom.h函数的典型用法代码示例。如果您正苦于以下问题：TypeScript h函数的具体用法？TypeScript h怎么用？TypeScript h使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了h函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: 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 }, [])
                     ]);
                 }
             })
         ))
     ])
 )))

开发者ID:OliverJAsh，项目名称:samefourchords.com，代码行数:25，代码来源:blocks.ts

示例2: renderForm

 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(),
                     ]),
                 ]),
             ],
         ),
     ]);
 }

开发者ID:pxfs，项目名称:fanboi2，代码行数:26，代码来源:post_form.ts

示例3: render

    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]));
    }

开发者ID:Caboosey，项目名称:mapillary-js，代码行数:34，代码来源:SequenceDOMRenderer.ts

示例4: _createPlayingButton

    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]);
    }

开发者ID:Caboosey，项目名称:mapillary-js，代码行数:30，代码来源:SequenceDOMRenderer.ts

示例5: h

    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()
                )
            ]
        );
    };

开发者ID:katebee，项目名称:frontend，代码行数:27，代码来源:render.ts

示例6: renderDate

 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]),
     ]);
 }

开发者ID:pxfs，项目名称:fanboi2，代码行数:8，代码来源:topic_view.ts

示例7: h

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

开发者ID:pxfs，项目名称:fanboi2，代码行数:8，代码来源:post_collection_view.ts

示例8: renderBoard

 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),
             ]),
         ]),
     ]);
 }

开发者ID:pxfs，项目名称:fanboi2，代码行数:10，代码来源:board_view.ts

示例9: h

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)
  ]);
}

开发者ID:tomjal，项目名称:tsf，代码行数:10，代码来源:myForm.ts

注：本文中的virtual-dom.h函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。