Polymer

Question

我有一个使用 <core-ajax> 将数据绑定到多个 <paper-dropdown-menu> 的动态表单。我的问题：根据先前的选择更改每个下拉列表中数据的首选方法是什么。现在，它没有 javascript，只有 Polymer 数据绑定。这是代码：

<polymer-element name="example-element" attributes="">
  <template>
    <link rel="stylesheet" href="example-element.css">
    
    <core-ajax auto
     url="http://example.json"
     response="{{regionData}}"
     handleAs="json">
    </core-ajax>

    <!-- global user object -->
    <pvc-globals id="globals" values="{{globals}}"></pvc-globals>

    <!-- page container -->
    <div class="background" vertical layout>
      <!-- toolbar -->
      <template is="auto-binding">


      <!-- Add teams dialog -->
      <paper-action-dialog heading="Add A Example" backdrop autoCloseDisabled
        id="addTeamDialog">
        <p>Once this form is complete, you will have a new example on your account.</p>
        <br>

        <!-- Region Name -->
        <paper-dropdown-menu label="Choose Your Region" style="width: 100%;">
            <paper-dropdown class="dropdown">
                <core-menu class="menu" selected="{{selection}}">
                    <template repeat="{{region in regionData}}">
                        <paper-item name="{{region.name}}">{{region.name}}</paper-item>
                    </template>
                </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>

        <br><br>

        <!-- State Name depending on what region you choose -->
        <paper-dropdown-menu label="Choose Your State" style="width: 100%;">
            <paper-dropdown class="dropdown">
                <core-menu class="menu">
                    <template ref="{{region.name}}" repeat="{{region, regionIndex in regionData}}">
                        <paper-item>{{region.states[regionIndex]}}</paper-item>
                    </template>
                </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>

        <br><br>

        <!-- Club Name -->
        <paper-dropdown-menu label="Choose Your Club depending on what region you choose" style="width: 100%;">
            <paper-dropdown class="dropdown">
                <core-menu class="menu">
                    <template repeat="{{region, regionIndex in regionData}}">
                      <template repeat="{{clubs in region.clubs}}">
                        <paper-item>{{clubs.name}}</paper-item>
                      </template>
                    </template>
                </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>

        <br><br>

        <!-- Team Name -->
        <paper-dropdown-menu label="Choose Your Team" style="width: 100%;">
            <paper-dropdown class="dropdown">
                <core-menu class="menu">
                    <template repeat="{{region, regionIndex in regionData}}">
                      <template repeat="{{clubs in region.clubs}}">
                        <paper-item>{{clubs.teams[regionIndex]}}</paper-item>
                      </template>
                    </template>
                </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>

        <!-- <paper-input-decorator label="Your Team Name" floatingLabel
          error="Team Name is required!" autovalidate>
            <input is="core-input" type="text" value="{{teamName}}" required>
        </paper-input-decorator> -->

        <paper-button dismissive on-tap="{{openInfo}}">More Info...</paper-button>
        <paper-button affirmative>Cancel</paper-button>
        <paper-button affirmative>Add Team</paper-button>
      </paper-action-dialog>


      <!-- more info dialog (At time, adding `backdrop` attr to this caused error on close) -->
      <paper-dialog heading="More Info For Adding Teams" transition="core-transition-top" 
        id="infoDialog">
        <p>If you're region or team is missing, please email us at 
          <a href="mailto:info@mintonette.io">info@mintonette.io</a> so we can contact the
          neccessary region/authorities to request your addition to join our community!</p>
      </paper-dialog>


      <!-- toast -->
      <paper-toast id="toast1" text="{{message}}" onclick="discardDraft(el)"></paper-toast>
    </div>
  </template>


  <script src="example-element.js"></script>
</polymer-element>

Answer 1

这是我的依赖（级联）下拉列表的示例：JSBin

它已被评论，但很快这就是它的作用：

它假设有保存的状态（在数据库中）并且在加载它
根据该状态启动下拉菜单。
它捕获选择更改（用于在之后存储它们）。

Answer 2

找到我认为对这个问题最 'Polymer-way' 可能的问题（直到 Polymer 团队成员回答它）。一旦你可以通过 <core-ajax> 元素访问你的 JSON 数据，然后在你的 <paper-dropdown-menu> 中绑定并循环遍历它，如下所示：

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

请注意，在 <core-menu> 元素上有 on-core-selected 属性绑定到我们脚本中的一个函数，它看起来像这样：

regionSelected: function(e) {
      var convert = [];
      // save selected item
      this.item = this.DDSelection;

      // Loop through ajax data to find obj selected that matches selection
      for (var i = 0; i <= this.yourData.length - 1; i++) {

        if (this.yourData[i].name === this.item) {
          this.yourObj = this.yourData[i];
          // convert obj to array b/c Polymer doesn't loop -> obj
          convert.push(this.yourObj);
          this.convert = convert;
        }

      }
    }

这基本上是在获取用户选择的选项并循环遍历您的 ajax 数据以找到匹配的属性名称。一旦有，然后将该对象转换为数组（如有必要）。这是至关重要的，因为截至目前，Polymer 仅循环遍历数组 - 而不是对象。然后，将其存储为名为 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>

一个好的 UX 移动是在选择第一个之前也禁用下拉列表。注意 <paper-dropdown-menu> 元素上的 disabled?="{{selection}}" 属性，它正在这样做...

就是这样！

Polymer - 如何数据绑定纸张下拉菜单选择以填充另一个

Polymer - How to data-bind paper-dropdown menu selections to fill another's

data-binding