Question

我刚刚进入Polymer。目前我正在尝试使用更多路由库来切换元素。 Rob Dodson的预演是here。声明性路线的基本概念已被很好地理解，我可以使其发挥作用。

但我的要求略有不同。我创建了两个元素：

<customer-list>

这会使用JSON字符串，并显示我拥有的客户列表。每个JSON记录都与CustomerId相关联。

<contact-info>

此处还涉及JSON字符串，其中包含每个使用CustomerId映射的联系信息列表。

我的contact-info元素中设置了一个属性（custid），即attributes="custid"。

我想要的是从customer-list元素单击客户并调用类似/customers/50的路由。需要在contact-info元素的50属性中设置此{{custid}}。最后，根据此客户ID，Polymer将解析并从JSON字符串中获取联系人。一旦获得以下代码段：

<template repeat={{c in contacts}}></template>

将绑定Customer Id 50的联系人列表。我不知道如何使用路由参数设置另一个的属性值。寻求专家帮助。我试过谷歌，但遗憾的是找不到合适的答案！

以下屏幕截图可能有助于了解我在寻找什么！

enter image description here

提前致谢。

编辑： Routes.HTML

＆＃13;

<link rel="import" href="../bower_components/more-routing/more-routing.html"/>
<more-routing-config driver="hash"></more-routing-config>
<more-route name="home" path="/"></more-route>
<more-route name="customers" path="/customers">
    <more-route name="customer-contact" path="/:custext"></more-route>
</more-route>

＆＃13;

Index.html（核心菜单）

＆＃13;

<more-route-selector>
  <core-menu selected="0">
    <core-item label="Home" route="home">
      <a href="{{urlFor('home')}}"></a>
    </core-item>
    <core-item label="Customers" route="customers">
      <a href="{{urlFor('customers')}}"></a>
    </core-item>
  </core-menu>
</more-route-selector>

＆＃13;

Index.html（主要部分）

＆＃13;

<more-route-selector selectedParams="{{params}}">
  <core-pages>
    <section route="home">
      <h1>Home</h1>
      <div>This is the home section</div>
    </section>
    <section route="customers">
      <h1>Customers</h1>
      <div>This is customers section</div>
    </section>
  </core-pages>
</more-route-selector>

＆＃13;

输出（截图） enter image description here

同时测试

＆＃13;

Chrome (42.0.2311.135 m) and Firefox (37.0.2)

＆＃13;

Answer 1

我认为您想要绑定到selectedParams元素的more-routing属性。我在漫画结束时解释了一下：https://youtu.be/-67kb7poIT8?t=3m15s

Answer 2

感谢YouTube上的Polycast from Rob Dodson和answer from Ian McLeod in Google Group。

代码段如下所示：

的index.html

＆＃13;

<section route="customer-detail">
  <post-card>
    <h2>Our branches</h2>
    <div><customer-detail route="customer-detail" cname="{{params.cust}}"></customer-detail></div>
    <footer><a href="{{urlFor('customers')}}">Bck to list</a></footer>
  </post-card>
</section>

＆＃13;

Customer-detail.html

＆＃13;

<customer-detail>

＆＃13;

<polymer-element name="customer-detail" attributes="cname fullname">
  <template>
      <link rel="stylesheet" href="customer-detail.css">
      <template repeat="{{c in customers}}">
          <template repeat="{{b in c.branches}}" if="{{c.cuname == cname}}">
              <div class="single-customer-info">
                  <h1>{{b.branch}} (Code: {{b.code}})</h1>
                  <p>
                      {{b.address}}. Phone: {{b.phone}}<br/>
                  </p>
                  <h1><a href="mailto:{{b.email}}">{{b.email}}</a></h1>
              </div>
          </template>
      </template>
  </template>

＆＃13;

最后是routes.html

＆＃13;

<more-route name="customers" path="/customers">
    <more-route name="customer-detail" path="/:cust"></more-route>
</more-route>

＆＃13;

希望这会有所帮助。

Polymer <more-routing>如何使用路由参数

2 个答案: