javascript - Polymer - 设置数组不更新 DOM

Question

我正在尝试对聚合物使用单向数据流。所以我在 polymer 之外更新商店，然后在更新后触发事件。当我第一次设置数组时，它起作用了。但随后它不起作用。

这是一支笔:http://codepen.io/tylergraf/pen/EyXZva/

代码如下:

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="iron-icon/iron-icon.html">
<script>
window.theList = [{
  stuff: 'stuff'
}];
</script>
<button id="changeOutside">Increment Value</button>
<parent-element></parent-element>

<dom-module id="parent-element">

  <template>
    <div class="list">
      <template is="dom-repeat" items="[[list]]">
        <child-element item="[[item]]"></child-element>
      </template>
    </div>
  </template>

  <script>
    Polymer({
      is: 'parent-element',
      ready: function(){

        document.addEventListener('dispatch', (e)=>{
          console.log(e.detail);
          // this.list = e.detail;
          this.set('list', e.detail);
        });

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

<dom-module id="child-element">
  <template>
    <ul>
      <li>Stuff: [[item.stuff]]</li>
    </ul>
  </template>

  <script>
    Polymer({
      is: 'child-element',
      properties: {
        item: {
          type: Object,
          value: {
            stuff: 'stuff',
            things: 'things'
          }
        },
      }
    });
  </script>
</dom-module>

<script>
var changeOutside = document.querySelector('#changeOutside');
var inc = 0;

changeOutside.addEventListener('click', function(){
  var newList = window.theList.map(function(li){
    li.stuff = inc++;
    return li;
  });
  var event = new CustomEvent('dispatch', {detail: newList});
  document.dispatchEvent(event);
})
</script>

Answer 1

这里肯定发生了一些奇怪的事情，下面是一个解决方法，但我很乐意看到 Polymer 支持它。

您的问题是 map 中的返回值是现有对象的修改版本。对象引用本身没有改变。因此，虽然从 map 创建了一个新数组，但对象本身没有改变。

如果你改变这张 map

var newList = window.theList.map(function(li){
  li.stuff = inc++;
  return li;
});

以下内容:

var newList = window.theList.map(function(li){
  return {
    stuff: inc++
  };
});

然后代码按预期工作。