聚合物路线/铁页面不工作？

我只是尝试了聚合物1.0。我发现app-route/iron-pages不起作用。在路线之间导航似乎不显示正确的视图。不知道哪个部分出了问题：聚合物路线/铁页面不工作？

在主文件：

<app-drawer-layout> 
    <app-location route="{{route}}"></app-location> 

    <app-route 
    route="{{route}}" 
    pattern="/:view" 
    data="{{routeData}}" 
    tail="{{subroute}}"></app-route> 

    <app-drawer> 
    <main-drawer></main-drawer> 
    </app-drawer> 

    <app-header-layout> 
    <app-header> 
     <paper-toolbar> 
     <paper-icon-button icon="menu" drawer-toggle></paper-icon-button> 
     <div class="title"> 
      Expenses App 
     </div> 
     </paper-toolbar> 

     <iron-pages selected="[[view]]"> 
     <expenses-dashboard name="dashboard" route="{{subroute}}"></expenses-dashboard> 
     <expenses-settings name="settings" route="{{subroute}}"></expenses-settings> 
     </iron-pages> 
    </app-header> 
    </app-header-layout> 
</app-drawer-layout>

在侧都expenses-dashboard和expenses-settings仅仅是占位内容，如：

<link rel="import" href="../../bower_components/polymer/polymer.html"> 

<dom-module id="expenses-dashboard"> 
    <template> 
    <h1>Dashboard</h1> 
    </template> 

    <script> 
    Polymer({ 
     is: 'expenses-dashboard' 
    }); 
    </script> 
</dom-module>

对于<iron-pages selected="[[view]]">，应我正在使用routeData.view或view？我试过这两个似乎没有改变任何东西。

上GitHub

来源

2016-08-21 Jiew Meng

'routeData'是一个可以包含多个项目的字典。所以你应该使用'' –

有代码中的几个问题的代码...

由于您的<iron-pages>.selected属性绑定到一个未定义的属性（ “意见”），<iron-pages>做不改变它的页面。在您的<app-route>数据绑定，路由部分被解析成routeData，其中:view塞将与routeData.view，这是什么，你应该结合<iron-pages>.selected访问：
```
<iron-pages selected="[[routeData.view]]"> 
```
为<iron-pages>默认的选择是页面索引（即其内容的子索引），因此selected通常必须是包含在0和N - 1之间的整数，其中N是子页面的数量。但你可以改变这一点。看起来您希望路线指定页面，该页面需要与<iron-pages>下的页面名称相匹配。要使用"name"作为选择的属性，你必须配置<iron-pages>.attrForSelected property：
```
<iron-pages selected="foo" attr-for-selected="name"> 
    <div name="foo"></div> 
    <div name="bar"></div> 
</iron-pages> 
```
它也可能是指定fallback selection一个好主意，因为用户可能会意外地导航到不对应的URL现有页面（例如，https://mypage.com/#/non-existent-page）。
```
<iron-pages selected="[[routeData.view]]" attr-for-selected="name" fallback-selection="foo"> 
    <div name="foo"></div> 
    <div name="bar"></div> 
</iron-pages> 
```
在<main-drawer>，你可能要与ES5语法（而不是ES6）最大的浏览器兼容性定义menuTap()。
```
Polymer({ 
    // menuTap(e) { ... } // <-- ES6 
    menuTap: function(e) { ... } 
}); 
```
你menuTap()功能设置window.location到原始路径，这将显着刷新页面。您可以通过使用散列路径来避免页面刷新，其中URL的预期子路径的前缀为#（例如，https://mypage.com/#/settings）。

哈希路径，配置<app-location>通过设置忽略哈希前缀useHashAsPath property：
```
<app-location use-hash-as-path route="{{route}}"> 
```
如果你希望避免散的路径，你可以遵循聚合物CLI的app-drawer-template，它采用锚标记的<iron-selector>里面设置位置，其中<app-location>相应地检测并更新其route。或者您可以从<expenses-app>中通过route，然后在menuTap()的内部使用this.set('route.path', "dashboard")。

随着上述变化，当用户导航到https://mypage.com/#/dashboard时，会发生以下情况。

<app-location>将在route属性设置为/dashboard。
<app-route>将解析route并将routeData.view设置为dashboard。
<iron-pages>将routeData.view视为dashboard，它与子级上的指定属性相匹配，这反过来导致仅显示该页面。

仅供参考，关于Encapsulated Routing with Elements的指南非常有用。

来源

2016-08-21 23:19:56 tony19

聚合物路线/铁页面不工作？

回答

相关问题