Question

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

这是表格和选择器的代码：

<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);，即如果已分配this.selItem，则foo不会出现在此处我希望它的表格。更麻烦的是，当点击app-link时，它基本上从在该表上呈现的服务器检索信息，如果选择了某些内容则显示奇怪，如果没有它呈现的话。

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

编辑，如果我完全删除了iron-selector代码，那么数组的dom-repeat渲染就会按我的意愿行事，无论我splice或push如何包含的元素。我只是以愚蠢的方式使用iron-selector吗？

谢谢，

Answer 1

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

铁 - 选择器＃1.0.2

聚合物＃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

1 个答案: