文章/答案/技术大牛

发布

社区首页 >问答首页 >Riotjs -前端页面结构

问Riotjs -前端页面结构
EN

Stack Overflow用户

提问于 2019-07-29 23:31:21

回答 2查看 59关注 0票数 4

我在利用暴动的系统。但是我在每个地方使用通用标签都有一个问题。因为我必须复制每一页的所有公共标签。

我像这样添加了所有的标签。有人有解决这个问题的办法吗？

<st-service>
    <st-alert></st-alert>
    <st-header></st-header>
    <st-body></st-body>
    <st-footer></st-footer>
</st-service>

<st-profile>
    <st-alert></st-alert>
    <st-header></st-header>
    <st-body></st-body>
    <st-footer></st-footer>
</st-profile>

riot.js

回答 2

Stack Overflow用户

发布于 2019-07-29 23:38:33

我找到了一个解决方案，我正在使用这个方法来处理这些常见的标签。像这样

<st-common>
    <st-alert></st-alert>
    <st-header></st-header>

    <yeild></yeild>

    <st-footer></st-footer>        
</st-common>

service-page.tag // page
<st-service-page>
    <st-common>
        <st-service></st-service>
    </st-common>
<st-service-page>

profile-page.tag // page
<st-profile-page>
    <st-common>
        <st-profile></st-profile>
    </st-common>
<st-profile-page>

service-view.tag
<st-service>
    // html / code body related to module
</st-service>

profile-view.tag
<st-profile>
    // html / code body related to module
</st-profile>

如果需要关于这方面的细节，我可以解释。

票数 3

Stack Overflow用户

发布于 2019-07-31 00:17:31

我必须更多地了解你是如何路由的才能确定，但我认为你应该避免为每个页面使用不同的外部标记。如果您的HTML看起来像这样：

<body>
    <st-app />
    <script>
        const pages = {
            "/": "st-home",
            "/about/": "st-about",
        }
        const content_tag = pages[window.location.pathname] || "st-notfound"
        riot.mount("st-app", {
            content_tag: content_tag
        })
    </script>
</body>

那么<st-app>应该是这样定义的：

<st-app>
    <st-alert></st-alert>
    <st-header></st-header>

    <div data-is={this.opts.content_page}></div>

    <st-footer></st-footer>        
</st-app>

这里最重要的是，您可以通过<st-app>的data-is属性和挂载选项来控制应该使用哪个标记。在本例中，<st-home>、<st-about>和<st-notfound>是在其他地方定义的riot组件。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57257025

复制

相似问题

问Riotjs -前端页面结构
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Riotjs -前端页面结构EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Riotjs -前端页面结构
EN