嵌套铁页（Polymer1.0）

我正在使用“page.js”进行路由

当我按下“tv”菜单时，它应该显示“tvAdd”，但它只显示空屏幕

---

提前感谢。

发生这种情况的原因是两个

元素都绑定到同一个属性。为了进一步阐述，以下是一个示例：

route

更改为

tv

父

元素的

选定属性更改为
tv

在父级

子

已将其

选定属性更改为
tv

子

中没有

tv

页面，因此子

中未选择任何内容，因此它将保持空白

如果要将

路由

设置为在子

中使用的路由名称之一，则情况也是如此

要解决此问题，必须将两个

绑定到不同的属性，第一个属性将确定您所在的父路由，第二个属性将确定子路由（如果有）

之后，您只需在路由回调中设置两个属性

一些伪代码：

...
...
...

页面（'/tvAdd'，函数（）{
app.route='tv'；
app.childRoute='tvAdd'；
});

你确定这一点吗？因为我做了一个快速的尝试，但似乎不起作用。在您的示例中，“page.js”配置在哪里？我的意思是-page（'/'，function（）{app.route='home'；}）；在该示例中，我在单击按钮时直接在模板上设置属性，因为我不确定路由是否适用于jsbin之类的代码沙盒服务。尽管如此，触发正在设置的属性的因素不会对输出产生影响——重点是演示如何使用两个属性来管理两个嵌套的

元素。您可以从该示例中获取代码，并用page.js路由回调替换按钮事件的处理程序，例如

page（'/page-1-2'，function（）{app.page='page-1'；app.route='page-1-2'；}）
<iron-pages attr-for-selected="data-route" selected="{{route}}">
    <section data-route="home">
        <paper-material elevation="1">
            <bortini-home></bortini-home>
        </paper-material>
    </section>

    <section data-route="tv">
        <paper-material elevation="1">
            <iron-pages attr-for-selected="data-route" selected="{{route}}">
                <section data-route="tvList">
                    <paper-material elevation="1">TV list</paper-material>
                </section>
                <section data-route="tvAdd">
                    <paper-material elevation="1">TV Add</paper-material>
                </section>
                <section data-route="tvEdit">
                    <paper-material elevation="1">TV edit</paper-material>
                </section>
                <section data-route="tvView">
                    <paper-material elevation="1">TV details</paper-material>
                </section>
            </iron-pages>
        </paper-material>
    </section>

    <section data-route="users">
        <paper-material elevation="1">
            <h2 class="paper-font-display2">Users</h2>

            <p>This is the users section</p>
            <a href="/users/Rob">Rob</a>
        </paper-material>
    </section>

    <section data-route="user-info">
        <paper-material elevation="1">
            <h2 class="paper-font-display2">
                User:<span>{{params.name}}</span>
            </h2>

            <div>This is <span>{{params.name}}</span>'s section</div>
        </paper-material>
    </section>

    <section data-route="contact">
        <paper-material elevation="1">
            <h2 class="paper-font-display2">Contact</h2>

            <p>This is the contact section</p>
        </paper-material>
    </section>

</iron-pages>

window.addEventListener('WebComponentsReady', function () {

    // We use Page.js for routing. This is a Micro
    // client-side router inspired by the Express router
    // More info: https://visionmedia.github.io/page.js/
    page('/', function () {
        app.route = 'home';
    });

    page('/tv', function () {
        app.route = 'tvAdd';
    });

    page('/tvAdd', function () {
        app.route = 'tvAdd';

    });

    page('/users', function () {
        app.route = 'users';
    });

    page('/users/:name', function (data) {
        app.route = 'user-info';
        app.params = data.params;
    });

    page('/contact', function () {
        app.route = 'contact';
    });

    // add #! before urls
    page({
        hashbang : true
    });

});