Question

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

这是一支笔：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支持这一点。

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

如果您更改此地图

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

以下内容：

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

然后代码按预期工作。

聚合物 - 设置数组不更新DOM

1 个答案: