• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [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;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript virtual-dom.patch函数代码示例发布时间:2022-05-25
下一篇:
TypeScript virtual-dom.diff函数代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap