Polymer <more-routing> 如何使用路由参数设置另一个元素的属性值

Question

我刚刚踏入Polymer。目前我正在尝试使用 more-route 库在元素之间切换。来自 Rob Dodson 的播客是 here。声明式路由的基本概念很好理解，我可以让它工作。

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

<customer-list>

This prases a JSON string and displays a list of customers I have. Every JSON record is associated with a CustomerId.

<contact-info>

A JSON string is involved here as well which has a list of contact information each mapped up with a CustomerId.

我在联系信息元素中设置了一个属性 (custid)，即 attributes="custid".

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

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

将绑定客户 ID 50 的联系人列表。我不知道如何使用路由参数设置另一个的属性值。寻求高手帮助。我尝试了 Google 但不幸的是找不到合适的答案！

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

提前致谢。

编辑： Routes.HTML

<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>

Index.html（核心菜单）

<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>

Index.html（主要部分）

<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>

输出（截图）

在两个

中都进行了测试

Chrome (42.0.2311.135 m) and Firefox (37.0.2)

Answer 1

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

Answer 2

感谢Polycast from Rob Dodson on YouTube, and answer from Ian McLeod in Google Group。

代码片段如下所示：

Index.html

<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>

客户-detail.html

<customer-detail>

<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>

最后 routes.html

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

希望这对其他人有所帮助。

Polymer <more-routing> 如何使用路由参数设置另一个元素的属性值

Polymer <more-routing> how can I set attribute value of another element using routing params

polymer