Question

我只是在试用Polymer 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

上的代码

Answer 1

您的代码中存在一些问题......

由于您的<iron-pages>.selected属性绑定到未定义的属性（“view”），<iron-pages>不会更改其页面。在<app-route>数据绑定中，路由部分被解析为routeData，其中:view slug将使用routeData.view访问，这是您应该绑定到<iron-pages>.selected的{{1}}。 1}}：
```
<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）。

对于散列路径，请通过设置useHashAsPath property来配置<app-location>以忽略散列前缀：
```
<app-location use-hash-as-path route="{{route}}">
```
如果您希望避免使用散列路径，可以使用Polymer CLI的app-drawer-template，<iron-selector>使用<app-location>内的锚标记设置位置，route检测并更新其route <expenses-app> 1}}因此。或者您可以从this.set('route.path', "dashboard")传递menuTap()，然后在https://mypage.com/#/dashboard内使用<app-location>。

通过上述更改，当用户导航到route时会发生以下情况。

/dashboard会将<app-route>属性设置为route。
routeData.view将解析dashboard并将<iron-pages>设置为routeData.view。
dashboard将$timebits = explode(":", $timepart); $now->setTime($timebits[0], $timebits[1], $timebits[2]);视为var users = [ { name: "lokesh", age: 25 }, { name: "john", age: 20 } ] <input type="text" ng-model="search"> <div ng-repeat="user in users | filter:search"> {{user.name}} {{user.age}} </div>，它与子项上的指定属性相匹配，这又会导致仅显示该页面。

作为参考，Encapsulated Routing with Elements上的指南非常有用。

聚合物路线/铁页不起作用？

1 个答案: