Question

我正在为系统使用暴动。但我在每个地方都使用通用标签时遇到了问题。因为我必须在每个页面上复制所有通用标签。

我添加了所有这样的标签。有人对此有解决方案吗？

<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>

Answer 1

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

<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>

如果需要详细说明，我可以解释。

Answer 2

我必须确定有关如何路由的更多信息，但是我认为您应该避免为每个页面使用不同的外部标签。如果您的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>

这里重要的是，您正在通过data-is属性和<st-app>的安装选项来控制应使用哪个标记。在此示例中，<st-home>，<st-about>和<st-notfound>是在其他地方定义的防暴组件。

Riotjs-前端页面结构

2 个答案: