0

如果您使用更新其值， Polymer 1.0您可以删除{{localPropFoo.bar}}并bar观察更改。this.set('localPropFoo.bar', 'new value');

但是，如果您想将模板绑定到您无法控制的外部对象，该怎么办？例如，这{{window.globalFoo.bar}}不会绑定bar更改，因为外部代码不依赖Polymer也不调用this.set.

在 codepen 上演示

手动使用Object.observe需要额外的代码，并且在 FireFox 中不起作用（对observe.js进行脏检查以进行救援）。

我想知道将数据绑定到您无法控制的外部对象的惯用方式是什么。

4

1 回答 1

0

Polymer不做开箱即用的观察，因为：

  1. Object.observe支持并不普遍，脏检查很昂贵。
  2. Object.observe本身可能很昂贵。

假设解决方案

自己捕捉变化，调用notifyPath、和。 它们都调度相应的非冒泡（捕获）自定义事件（仅在需要时）。this.fire('global-foo-changed', {path: 'globalFoo.bar', value:...}this.setthis.push
globalFoo-changed

为什么我的global-foo-changed事件只影响this元素？

  1. global-foo-changed事件正在捕获（非冒泡）。
  2. Polymer 元素默认监听冒泡事件。
  3. 出于某种原因，这些捕获侦听器捕获从同一元素（而不是其子元素）调度的气泡事件。在 codepen 上演示。

您可以用这种行为修补聚合物（我不明白它是如何工作的）：

SharedGlobalsBehavior = {
  properties: {
    globalFoo: {
      type: Object,
      notify: true,
      value: globalFoo
    }
  },
  created: function() {
    window.addEventListener('global-foo-changed', () => {
      if (!event.detail || !event.detail.path)
        return; // Property initialization.
      this.notifyPath(event.detail.path, event.detail.value);
    },/* if capturing */ true);
  }
};

为什么没有开箱即用的观察

...有时命令式代码需要直接更改对象的子属性。由于我们避免使用更复杂的观察机制，例如 Object.observe 或脏检查，以便为最常见的用例实现跨平台的最佳启动和运行时性能，因此直接更改对象的子属性需要用户的合作。

具体来说，Polymer 提供了两种方法允许将此类更改通知系统：notifyPath(path, value) 和 set(path, value)，其中 path 是标识路径的字符串（相对于宿主元素）。

于 2015-09-18T14:23:14.973 回答