Question

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

＆＃13;

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

＆＃13;

Answer 1

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

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

它假定存在状态（在DB中）并且在加载时它根据该状态启动下拉列表。
它捕获选择更改（用于存储它们之后）。

Answer 2

找到我认为对这个问题最可能的“聚合物方式”（直到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移动也是禁用下拉列表，直到选择第一个。请注意disabled?="{{selection}}"元素上的<paper-dropdown-menu>属性正在执行此操作...

就是这样！

聚合物 - 如何数据绑定纸张下拉菜单选项以填充其他选项

2 个答案: