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에 있습니다