Data binding 聚合物-如何数据绑定纸张下拉菜单选择以填充另一个&x27；s

我有一个动态表单，它使用

将数据绑定到多个

中。我的问题：根据上一个下拉列表的选择，更改每个下拉列表中的数据的首选方式是什么。现在，它没有javascript，只有聚合数据绑定。代码如下：

完成此表单后，您的帐户上将有一个新的示例



{{region.name}



{{region.states[regionIndex]}



{{俱乐部名称}



{{俱乐部.球队[地区索引]}
更多信息。。。
取消
添加团队
如果您所在的地区或团队失踪，请发送电子邮件至
所以我们可以联系
必要的地区/当局要求您加入我们的社区

以下是我的相关（级联）下拉列表示例：

有人对它进行了评论，但很快它就会这样做：

• 它假定存在已保存状态（在数据库中）并在加载时将其加载
  根据该状态启动下拉列表
• 它捕获选择更改（用于在更改后存储它们）

---

找到了我认为最适合这个问题的“聚合物方式”（直到聚合物团队成员回答）。一旦您通过

元素访问了JSON数据，然后在

中绑定并循环它，如下所示：

<core-ajax auto
   url="http://jsonexample.com/example.json"
   response="{{yourData}}"
   handleAs="json">
</core-ajax>

<!-- Region Name -->
    <paper-dropdown-menu label="Your Label" style="width: 100%;">
        <paper-dropdown class="dropdown">
            <core-menu class="menu" selected="{{selection}}" on-core-select="{{DDSelected}}">
                <template repeat="{{something in yourData}}">
                    <paper-item name="{{something.name}}">{{something.name}}</paper-item>
                </template>
            </core-menu>
        </paper-dropdown>
    </paper-dropdown-menu>

基本上，这是采取用户选择的选择，并在ajax数据中循环查找匹配的属性名称。完成后，将该对象转换为数组（如果需要）。这是至关重要的，因为到目前为止，聚合物只在阵列中循环，而不是在物体中循环。然后，将其存储为名为

convert

一旦你这样做了，在你的下一个下拉列表中，循环通过

convert

，你就是黄金：

...
<paper-dropdown-menu label="Choose Your Second" style="width: 100%;" 
   disabled?="{{!selection}}">
       <paper-dropdown class="dropdown">
           <core-menu class="menu">
               <template repeat="{{key, index in convert}}">
                   <template repeat="{{prop in key.props}}">
                      <paper-item>{{prop}}</paper-item>
                   </template>
                </template>
           </core-menu>
       </paper-dropdown>
 </paper-dropdown-menu>

。。。
{{prop}}

一个好的UX移动是也禁用下拉列表，直到选择了第一个。请注意执行此操作的

元素上的

已禁用？=“{selection}”

属性

---

就这样

这肯定是可行的，但肯定有一个更具体的聚合物设计，用更少的逻辑和更多的数据绑定来实现这一点？另外，我特别使用了

，它的绑定规则与默认的

元素稍有不同。

...
<paper-dropdown-menu label="Choose Your Second" style="width: 100%;" 
   disabled?="{{!selection}}">
       <paper-dropdown class="dropdown">
           <core-menu class="menu">
               <template repeat="{{key, index in convert}}">
                   <template repeat="{{prop in key.props}}">
                      <paper-item>{{prop}}</paper-item>
                   </template>
                </template>
           </core-menu>
       </paper-dropdown>
 </paper-dropdown-menu>