聚合物铁选择器使dom.repeat中的this.push（）混乱

Question

I have a strange problem where I have a div table filled by dom-repeat where I am using an iron-selector to pick entries from that table. However the arrays I'm pushing to don't appear in the correct order when I have something selected in the iron-selector. Is this just some subtle thing about how the selector is supposed to work, that I'm misunderstanding? Do I have to unassign the selected value every time I want to push to the array properly?

Here's the code for the table and the selector:

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

EDIT: I have to splice everything out of the array before trying to push for the problem to occur.

the problem is roughly if I do this.push('dirs', foo); or this.push('keys', foo); with something on this table selected, that is if this.selItem is assigned, foo doesn't appear in the place in the table where I expect it. More troubling, when an app-link is clicked, it basically retrieves information from a server that is rendered on this table, which shows up bizarre if something was selected, if not it renders fine.

Should I be un-assigning selItem to avoid this? If so, what is the appropriate way to do this?

EDIT, if I completely remove the iron-selector tags, the dom-repeat rendering of the array behaves how I want it, regardless of how I splice or push to the contained elements. Am I just using iron-selector in a dumb way?

Thanks,

Answer 1

You should be able to put multiple dom-repeats in an <iron selector> . It works for me in my test here:

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>