聚合物 - 更新元素答案

【问题标题】：Polymer - Updating Element聚合物 - 更新元素
【发布时间】：2015-12-09 15:09:58
【问题描述】：

我正在学习 Polymer。一个挑战我的项目是更新数组的项目。我希望有一个 Polymer 的 CDN，这样我就可以组装一个小提琴。不过现在，我有一个这样定义的元素：

my-element.html

<dom-module id="my-element">
  <button on-click="onLoadData">Load Data</button>  
  <button on-click="onTest1Click">Test 1</button>
  <button on-click="onTest2Click">Test 2</button>

  <template is="dom-repeat" items="[[ data ]]" as="element">
    <div><span>[[ element.id ]]</span> - <span>[[ element.status ]]</span></div>
    <template is="dom-repeat" items="[[ element.children ]]" as="child">
      <div>&nbsp;&nbsp;<span>[[ child.id ]]</span> - <span>[[ child.status ]]</span></div>
    </template>
  </template>

  </template>

  <script>
    Polymer({
      is: 'my-element',
      properties: {
        data: {
          type: Array,
          value: function() {
            return [];
          }
        }
      },

      onLoadData: function() {
        // Generate some dummy data for the sake of illustration.
        for (var i=1; i<=3; i++) {
          var element = {
            id: i,
            state: 'Initialized',
            description: ''
          };

          element.children = [];
          for (var j=1; j<=5; j++) {
            var child = {
              id: i + '-' + j,
              state: 'Initialized',
              description: ''
            }
            element.children.push(child);
          }

          data.push(element);
        }
      },

      // Setting an individual property value works
      onTest1Click: function() {
        this.set('data.0.children.0.state', 'data set');
      },

      // Setting an entire object value does NOT work.
      onTest2Click: function() {
        var c = this.data[0].children[0];
        c.state = 'data set';
        this.set('data.0.children.0', c);
      }
    });
  </script>
</dom-module>

由于某种原因，如果我更新数组元素的属性值（如onTest1Click 所示），UI 会正确更新。但是，如果我更新整个元素（如 onTest2Click 所示），则 UI 不会更新。在我真正的问题中，我正在更新一个元素的多个属性。出于这个原因，我试图更新一个数组元素而不仅仅是一个属性。我做错了什么或误解了什么？或者，我是否必须单独更新每个属性值？

【问题讨论】：

您可以使用 polygit 作为 "CDN" 来设置 JSBIN，例如：jsbin.com/nemire/edit?html,output

标签： polymer

【解决方案1】：

如果你想改变一个数组，而不仅仅是一个数组中的一个对象（比如换出一个数组中的整个元素），有类似于this.set的数组突变方法。

例如，this.splice('data.0.children', 0, 1, c) 将删除子数组的 0 索引处的当前项并将其替换为新项，这似乎是您正在尝试执行的操作。还有this.shift、this.unshift、this.push 和this.pop。这些都类似于它们的 Array 原型。

需要注意的一点是，在您的示例中，您实际上也没有换出整个对象。当您从数组中获取元素，改变一个字段并尝试将其替换为自身时，您实际上并没有替换它，因此实际上不会触发更新。而且由于该字段的突变是在 Polymer 的通知系统之外完成的，因此也不会触发更新。如果您用实际不同的对象替换该项目，它将使用拼接工作。 https://jsbin.com/rapomiyaga/1/edit?html,output（这是 Günter Zöchbauer 的 jsbin 的修改快照）

如果您不制作对象的副本/全新的对象，则需要通过 this.set 单独更新每个字段。

【讨论】：

【解决方案2】：

是的，您需要单独更新每个属性值。当您调用set 时，Polymer 将转到给定路径并检查值是否已更改。如果该值是一个对象，它将比较引用（而不是子属性）。由于对象引用没有改变，它不会更新 UI。

【讨论】：