聚合物1.0 dom-repeat在陣列更改時未得到正確通知

Question

我有一個<paper-dialog>模式，它的作用類似於表單以邀請新候選人接受挑戰。在<invite-candidates>組件中，有一個dom-repeat，它爲candidates列表中的每個對象呈現一個複雜輸入（<invite-candidate-input>）。

每當我打開（切換）該模式，我清除列表並添加一個新的對象進行渲染。第一次打開頁面並打開模式，我看到一個輸入，如預期的那樣。但是，如果我關閉模式，然後再次打開它，它將被清除，一個新的對象被添加到列表中，但dom-repeat未被通知。當我點擊按鈕添加另一個輸入時，它被添加到列表並呈現。但是我的列表現在有2個對象，並且只有1 <invite-candidate-input>。

<dom-module id="candidate-page"> 
<template> 
    <button id="createActionButton" on-click="_toggleDialog"></button> 
    <invite-candidates id="inviteCandidates"></invite-candidates> 
</template> 
<script> 
    Polymer({ 
     is: 'candidate-page', 
     properties: { 
      Address: String, 
      challenges: { 
       type: Array, 
       notify: true 
      } 
     }, 
     _toggleDialog: function() { 
      this.$.inviteCandidates.toggle(); 
     } 
    }); 
</script> 

<dom-module id="invite-candidates"> 
<template> 
    <paper-dialog id="dialog" modal style="background: white;"> 
     <form is="iron-form" id="form"> 
      <template is="dom-repeat" items="{{candidates}}"> 
       <invite-candidate-input candidate="{{item}}"></invite-candidate-input> 
      </template> 
      <div id="addCandidate" on-click="_addCandidate"> 
       <iron-icon icon="add"></iron-icon> 
       <span>Add another candidate</span> 
      </div> 
      <div class="buttonGroup"> 
       <paper-button class="primary" raised on-click="inviteCandidates" dialog-confirm>Invite 
       </paper-button> 
      </div> 
     </form> 
    </paper-dialog> 
</template> 
<script> 
    Polymer({ 
     is: 'invite-candidates', 
     properties: { 
      candidates: { 
       type: Array, 
       notify: true, 
       value: [] 
      } 
     }, 
     listeners: { 
      'candidate-removed': '_removeCandidate' 
     }, 
     toggle: function() { 
      this._clearDialog(); 
      this._addCandidate(); 
      this.$.dialog.toggle(); 
     }, 
     _addCandidate: function() { 
      this.push('candidates', {}); 
     }, 
     _removeCandidate: function(event){ 
      var index = this.candidates.indexOf(event.detail); 
      this.splice('candidates', index, 1); 
     }, 
     _clearDialog: function() { 
      var el; 
      while ((el = document.querySelector('invite-candidate-input')) !== null) { 
       el.remove(); 
      } 
      this.candidates = []; 
     } 
    }); 
</script> 

<dom-module id="invite-candidate-input"> 
<template> 
    <div id="inputContainer"> 
     <paper-input id="address" label="Address" value="{{candidate.Address}}"></paper-input> 
     <iron-icon icon="remove" on-click="_removeItem"></iron-icon> 
    </div> 
    <br> 
</template> 
<script> 
    Polymer({ 
     is: 'invite-candidate-input', 
     properties: { 
      challenges: { 
       type: Array 
      }, 
      candidate: { 
       type: Object, 
       reflectToAttribute: true, 
       notify: true 
      } 
     } 
     _removeItem: function() { 
      this.fire('candidate-removed', this.candidate); 
      this.remove(); 
     } 
    }); 
</script> 

Answer 1

這是因爲在_clearDialog你做this.candiates = [];。如果你這樣做this.splice('candidates', this.candidates.length)它應該工作。