通知聚合物复杂对象已更改答案

【问题标题】：Notify polymer complex object has changed通知聚合物复杂对象已更改
【发布时间】：2015-12-04 04:29:48
【问题描述】：

如果数据绑定复杂对象的成员发生更改，如何触发模板刷新？

在模板中：

<other-component data="{{complexObject}}"></other-object>

在组件中：

_onChange: function(newData) {
   //callback from some event-system
   this.set("complexObject", newData);
}

_onChange-方法在 complexObject 更改时触发，但newData 始终是对同一个对象的引用，只是该对象的成员发生了更改 - 因此，聚合物不会更新视图并且不会'不要将数据传递给other-component。

有没有办法让聚合物知道确实有一些新数据，它必须重新评估模板？如果我创建 newData 的浅层克隆，它会起作用，但这似乎是一种 hack，可能会损害大型对象的性能。

我无法使用set 方法通过路径更改对象的属性，因为更改发生在聚合物元素之外，我无法控制它。

【问题讨论】：

你试过打电话给this.notifyPath("complexObject"); 吗？
@PascalGula 我试过了，但没有任何改变。我挖掘了聚合物源代码，this.set 在内部已经调用了 notifyPath
你还设置了notify: true 吗？ :)

标签： polymer polymer-1.0

【解决方案1】：

调用渲染()

this.$.yourTemplateID.render();

【讨论】：

你的TemplateID是什么？我试图给 dom-module 中的

【解决方案2】：

这是一个工作示例，其中兄弟元素相互交换数据：Plunk。

文档：https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#array-binding

<template>
  <button on-tap="btnTapped">change Emploees from Second</button>
              second: empl: <span>{{empl.employees.0.firstName}}</span>
</template>
...
<script>
btnTapped: function () {

    console.log('Second: btnTapped');

    //Propagate array subproperty
    this.set('empl.employees.0.firstName', 'Test');
    console.log(this.empl.employees[0].firstName);


    //Object set
    this.set('temp.firstName', 'Test');

  }
</script>

【讨论】：

虽然这是一个好方法，但更新 complexObject 的代码独立于聚合物和 Web 组件（第 3 方库）

【解决方案3】：

this.complexObject = _.clone(this.complexObject)

克隆和重新分配可能会解决这个问题`

【讨论】：

我已经想到了（见第 2 段，第 2 句），但我想知道是否有更好的方法来处理这个问题