聚合物铁选择器在 dom-repeat 中搞乱了 this.push()

Question

我有一个奇怪的问题，我有一个由 dom-repeat 填充的 div table，我正在使用 iron-selector 从 table 中选择条目].但是，当我在 iron-selector 中选择了一些东西时，我推送的数组没有以正确的顺序出现。这只是关于选择器应该如何工作的一些微妙的事情，我误解了吗？每次我想正确推送到数组时，是否必须取消分配 selected 值？

这是 table 和选择器的代码：

<iron-selector  selected="{{selItem}}">        
  <template is="dom-repeat" items="{{dirs}}">
     <div class="row" name="{{item.name}}">
       <div class="item">
         <a is="app-link" path="{{item.url}}" href="{{item.url}}">
         <dir-item kind="folder">{{item.name}}</dir-item>
         </a>
       </div>
      <div class="item"> value</div>
    </div>
  </template>
  <template is="dom-repeat" items="{{keys}}">
    <div class="row" name="{{item.name}}">
      <div class="item">
        <dir-item kind="key">{{item.name}}</dir-item>
      </div>
      <div class="item">
        <span class="paper-font-body1">{{item.value}}</span>
      </div>
    </div>
  </template>
</iron-selector>

编辑：在尝试推动问题发生之前，我必须 splice 数组中的所有内容。

问题大致是如果我this.push('dirs', foo);或this.push('keys', foo);选择了这个table上的东西，也就是说，如果分配了this.selItem，foo不会出现在 table 我期望的地方。更麻烦的是，当单击 app-link 时，它基本上会从服务器中检索信息，并在 table 上呈现，如果选择了某些内容，则显示很奇怪，否则呈现正常。

我应该取消分配 selItem 以避免这种情况吗？如果是这样，执行此操作的适当方法是什么？

编辑，如果我完全删除 iron-selector 标签，数组的 dom-repeat 渲染将按照我想要的方式运行，无论我如何 splice 或 push到包含的元素。我只是在愚蠢地使用 iron-selector 吗？

谢谢，

Answer 1

您应该能够在 <iron selector> 中放置多个 dom 重复。它在我的测试中对我有用：

iron-selector#1.0.2

polymer#1.0.8

<dom-module id="x-app">

  <style>

    :host {
      display: block;
    }

    button {
      padding: 8px;
      margin: 16px;
    }

    iron-selector {
      display: block;
      border: 1px solid #ccc;
      border-top: none;
    }

    .row {
      padding: 16px;
      border-top: 1px solid #ccc;
    }

    .row.iron-selected {
      background-color: #ccc;
    }

  </style>

  <template>

    <button on-tap="testSpliceAndPush">Test Splice And Push</button>

    <iron-selector attr-for-selected="name" selected="{{selected}}">
      <template is="dom-repeat" items="{{aItems}}">
        <div class="row" name="{{item.name}}">{{item.name}}</div>
      </template>
      <template is="dom-repeat" items="{{bItems}}">
        <div class="row" name="{{item.name}}">{{item.name}}</div>
      </template>
    </iron-selector>

  </template>

  <script>

    Polymer({

      is: 'x-app',

      ready: function() {
        this.aItems = [{name: 'a0'}, {name: 'a1'}, {name: 'a2'}];
        this.bItems = [{name: 'b0'}, {name: 'b1'}, {name: 'b2'}];
      },

      testSpliceAndPush: function() {
        this.splice('aItems', 0, this.aItems.length);
        this.splice('bItems', 0, this.bItems.length);

        for (var i = 0; i < 4; i++) {
          this.push('aItems', {name: 'a' + i});
        }

        for (var i = 0; i < 5; i++) {
          this.push('bItems', {name: 'b' + i});
        }
      }

    });

  </script>

</dom-module>

聚合物铁选择器在 dom-repeat 中搞乱了 this.push()

polymer iron-selector messing up this.push() in dom-repeat

javascript

polymer