嵌套鐵頁（Polymer1.0）

Question

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

});

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

當我按“電視”菜單時，它應該顯示“ tvAdd”，但它只顯示空白屏幕。

提前致謝。

Answer 1

發生這種情況的原因是，兩個<iron-pages>元素都綁定到相同的屬性。 為了進一步詳細說明，下面是一個示例：

1. route更改route到tv
2. 父<iron-pages>元素的selected屬性更改為tv
3. tv頁面是在父<iron-pages>
4. 子<iron-pages>的selected屬性更改為tv
5. 子<iron-pages> tv中沒有tv頁面 ，因此在其中沒有任何選擇，並且它保持空白。

如果要將route設置為在子<iron-pages>使用的路由名稱之一，也是如此。

要解決此問題，必須將兩個<iron-pages>都綁定到不同的屬性 ，第一個屬性將確定您所在的父路由，第二個屬性將確定子路由（如果有）。

之后，您只需在路由回調中設置兩個屬性即可。

一些偽代碼：

<iron-pages attr-for-selected="data-route" selected="{{route}}">
  ...
  <section data-route="tv">
    ...
    <iron-pages attr-for-selected="data-route" selected="{{childRoute}}">
      ...
      <section data-route="tvList">

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