this.setで配列の値を変更すると、dom-repeatの結果が奇妙になる

Question

既存のモジュールを改良して、素敵なPRを送信できるようにしようとしています。しかし、私は立ち往生しています。 基本的には、this.set('_stars.' + i, value)を使用して_stars配列の値を変更しようとすると、dom-templateは一見無作為に表示されるようです。

モジュールの元の著者は、配列全体を再割り当てすることで問題を解決しました。最初は、配列のインデックス値を変更するPolymerの能力を無視していたに違いありません。さて、同じ種類の奇妙なものに遭遇したのだろうか？

元の_updateStarsを使用すると、何も動作しないことがわかります。 __updateStarsと表示されているものを使用すると、すべてが正確にのように動作します。

奇妙なパターンが必要ですが、私はそれを解決できませんでした。

私には明らかなものがありません。あなたは新しい配列を作成しているので、

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="../paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../iron-icons/iron-icons.html"> 
<link rel="import" href="../iron-icon/iron-icon.html"> 

<dom-module id="star-rating"> 
    <template> 
     <style> 
      iron-icon { 
       color: var(--star-color, #4775D1); 
      } 
      paper-icon-button { 
       color: var(--star-color, #4775D1); 

       --paper-icon-button-disabled: { 
        color: #4775D1; 
       }; 
      } 
      [score] { 
       @apply(--layout-horizontal); 
       @apply(--layout-center); 
      } 
     </style> 
     <div score> 
      HERE: {{_o(_stars,_stars.*)}} EH 
      <template id="domRepeat" is="dom-repeat" items="{{_stars}}" as="star"> 
       {{star}} 
       <template is="dom-if" if="[[readOnly]]"> 
        <iron-icon icon="{{star}}"></iron-icon> 
       </template> 
       <template is="dom-if" if="[[!readOnly]]"> 
        <paper-icon-button id="item-{{index}}" on-click="_updateRate" icon="{{star}}"></paper-icon-button> 
       </template> 
      </template> 

      <template is="dom-if" if="[[readOnly]]"> 
       <content select='[votes]'></content> 
      </template> 
     </div> 
    </template> 
    <script> 
     Polymer({ 
      _o: function(o){ 
       return JSON.stringify(o); 
      }, 

      is: "star-rating", 

      observers: [ 
       '_updateStars(rate)' 
      ], 
      properties: { 
       _stars: { 
        type: Array, 
        value: function() { return ["star", "star", "star-half", "star", "star-border"]; }, 
       }, 
       // number of stars assigned for score 
       rate: { 
        type: Number, 
        value: 0 
       }, 
       // show votes and disble scoring option 
       readOnly: { 
        type: Boolean, 
        value: false 
       } 
      }, 
      _updateRate: function (e) { 
       var id = parseInt(e.currentTarget.id.split('-')[1]); 
       this.rate = id + 1; 
      }, 

      _updateStars: function (rate) { 
       var intPart = Math.floor(rate); 
       var decimalPart = rate % 1; 
       debugger; 
       for (var i = 0; i < 5; i++) { 
        this.set('_stars.' + i, (i < intPart) ? 'star' : 'star-border') ; 
       } 
       if (decimalPart >= 0.5) this.set('_stars.' + intPart, "star-half"); 
      }, 

      __updateStars: function (rate) { 
       var intPart = Math.floor(rate); 
       var decimalPart = rate % 1; 
       debugger; 
       for (var i = 0; i < 5; i++) { 
        //this.set('_stars.' + i, (i < intPart) ? 'star' : 'star-border') ; 
        this._stars[ i ] = (i < intPart) ? 'star' : 'star-border' ; 
       } 
       if (decimalPart >= 0.5) this._stars[ intPart ] = "star-half"; 

       var array = this._stars; 
       this._stars = []; 
       this._stars = array; 
      }, 

     }); 
    </script> 
</dom-module> 

Answer 1

__updateStars機能が動作し、ポリマーの変更が起こる持っていることを通知し、dom-repeatは自分の仕事をします。

プリミティブ配列項目がサポートされていません。ので、

_updateStars機能が動作しません。これは、同じ値を持つプリミティブ（数値、文字列、ブール値など）が同じオブジェクトで表されるためです。

Hereあなたは、配列の操作について簡単な説明を見つけることができます。これはポリマー1.0にあります