Question

我想知道Polymer 1.0是否支持selectedParams。

我正在遵循更多路线的文件 https://github.com/PolymerLabs/more-routing 在README文件中。

<link rel="import" href="../bower_components/more-routing/more-routing.html">
<more-routing-config driver="hash"></more-routing-config>  

<more-route name="login" path="/">
</more-route>
<more-route name="inbox" path="/inbox">
    <more-route name="viewemail" path="/:threadId">
    </more-route>
</more-route>
<more-route-selector selectedParams="{{params}}" on-click="bodyClick">

    <iron-pages selected="{{route}}" class="fullbleed fit">
        <section route="login" >
        </section>
        <section route="viewemail" class="layout vertical fit">
            Test params : <span>{{params}}</span> End
            Test params : <span>{{params.threadId}}</span> End
            <span>{{route}}</span>
        </section>
    </iron-pages>
</more-route-selector>

问题是没有设置params，所以我不能在路径中引用threadId参数。

它工作的路由对/ inbox / testid的路由是路由到带有route =＆＃34; viewemail＆＃34;的段，但没有设置params。

Answer 1

selectedParams应写为selected-params。 From 1.0 docs：

带有破折号的属性名称通过将每个破折号后面的字符大写，然后删除破折号来转换为camelCase属性名称。例如，属性first-name映射到firstName。

因此，您的more-route-selector应声明如下：

<more-route-selector selected-params="{{params}}" on-click="bodyClick">

Answer 2

 <more-route name="viewemail" path="/:threadId">

上面的＆＃34; routes.html＆＃34;将名称绑定到您想要引用的threadId ....

当您在模板中使用它们时，请获取上下文...

  <more-route context name="viewemail" params="{{params}}"></more-route>

...所以你可以在Polymer类中使用这些属性......

  ready: function() {
    if (typeof this.params.viewemail != 'undefined'){
      this._mvar = this.params.viewemail;
      this.$.get_divID = _mvar;
       if(MoreRouting.getRoute('viewemail').active){...}
    }
  },

Answer 3

正如您在此Github issue中已经指出的那样，行为是more-routing的Polymer 1.0迁移的一个错误（称之为缺少功能，因为根本没有设置{{}的指令1}}）。

只要不存在修复，您有两种方法可以手动规避问题而无需修改项目源代码：

<强> 1。 解决方法：聆听selectedParams元素上的on-more-route-change。

当前路由参数可以从事件处理程序中以more-route-selector的形式访问（注意：由于不可枚举的JS getter，该对象不可序列化）。手动将这些参数交给你的元素。

<强> 2。 良好的解决方案：使用上下文感知路由。

event.detail.newRoute.params未在selectedParams上设置，但在路线上未设置。包含您网页的上下文路由，并在其上绑定more-route-selector。

因此，您可以在路由器文件中创建一个命名路由：

{{params}}

在您的页面元素中按名称引用此路线（或直接说明路径）：

<more-route path='/path/:param' name='path-route'/>

将页面元素放在<more-route context name='path-route' params='{{params}}'/>中，如前所述。参数绑定到more-router-selector。

该模式在project page上进行了解释，并在演示应用中使用。

聚合物1.0：更多路径选择的帕拉姆参数未设置

3 个答案: