聚合物 - 设置阵列不更新DOM

我正尝试使用聚合物的单向数据流。因此，我正在更新聚合物之外的商店，然后在更新时发布活动。当我第一次设置数组时，它工作。但随后的时间它不起作用。聚合物 - 设置阵列不更新DOM

这里有一个笔：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>

来源

2016-07-07 Tyler Graf

肯定是有一些奇怪的事情在这里，下面是一个解决方法，但我很乐意看到聚合物支持这一点。

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

如果更改了此地图

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

以下几点：

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

然后代码工作正常。

来源

2016-07-07 16:45:24

聚合物 - 设置阵列不更新DOM

回答

相关问题