聚合物嵌套的应用程序路由未正确映射 [英] Polymer nested app routes are not mapping correctly

问题描述

我正在尝试正确设置一些基本路线.我正在使用Polymer 1.5.0，但在使用嵌套路由时遇到了问题.

I am trying to get some basic routes right. I'm using Polymer 1.5.0 and I'm having problems using nested routes.

我正在使用app-route 0.9.2

I'm using app-route 0.9.2

正如这篇文章所建议的，Polymer在路由中使用了分散式方法.因此，我决定执行以下操作:

As this post suggests, Polymer uses a decentralized approach in routing. Therefore I decided to do the following:

<app-route route="{{route}}"
       pattern="/:page"
       data="{{data}}"
       tail="{{tail}}">
</app-route>

  <iron-pages selected="{{data.page}}" attr-for-selected="title" fallback-selection="404">
      <pgarena-home-app title="" route="{{tail}}" ></pgarena-home-app>
      <pgarena-tournament-app title="tournament" route="{{tail}}"></pgarena-tournament-app>
      <pgarena-account-app title="account" route="{{tail}}"></pgarena-account-app>
      <div title="404">
          <h1>{{data.page}} could not be found!</h1>
      </div>
  </iron-pages> 

子页面:

pgarena-account-app

pgarena-account-app

<iron-pages selected="{{data.action}}" attr-for-selected="title" fallback-selection="404">
            <pgarena-account-index-view title=""></pgarena-account-index-view>
            <pgarena-account-login-view title="login"></pgarena-account-login-view>
            <pgarena-account-register-view title="register"></pgarena-account-register-view>
            <div title="404">
                <h1>Not found :(</h1>
            </div>
        </iron-pages>

pgarena-tournament-app

pgarena-tournament-app

<!-- Chooses the new tournament page. -->
      <app-route 
        route="{{route}}"
        pattern="/:action"
        data="{{data}}"
        tail="{{tail}}"
        >
        </app-route>

    <iron-pages selected="{{data.action}}" attr-for-selected="title" fallback-selection="404">
        <pgarena-tournament-index-view title=""></pgarena-tournament-index-view>    
        <!-- The list of all the tournaments -->    
        <pgarena-tournament-list-view title="list"></pgarena-tournament-list-view>
        <div title="404">
            <h1>Not Found!</h1>
        </div>
    </iron-pages>

一切似乎都还好吧?根据URL，我在这里正在利用元素的延迟加载.

Everything seems ok, right? According to the URL What I'm doing here is taking advantage of Lazy Load of elements.

我在 Polycasts示例中看到了他们使用隐藏"方法.他们在其中选择元素.问题是我们失去了延迟加载优势".

I've seen in the Polycasts examples that they use the "hidden" approach. In which they select the element. The problem is that we lose the "Lazy Loading Advantage".

可能是什么问题?

推荐答案

OMG！我完全忘了在Polycasts#46/47 中，罗伯·道森(Rob Dodson)强调了强调 >使用铁选择器时，我们应该通过单向绑定，即方括号[]与花括号{}

OMG! I totally forgot. In Polycasts #46/47 Rob Dodson makes the strong emphasis that when using iron-selector, we should pass one-way binding which is with the square brackets [] versus the curly brackets {}

因此，在一天结束时应该:

<iron-pages selected="[[data.action]]"

代替:

<iron-pages selected="{{data.action}}"

这篇关于聚合物嵌套的应用程序路由未正确映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！