0

値を更新する ために使用すると、ドロップPolymer 1.0でき、変更が監視されます。{{localPropFoo.bar}}barthis.set('localPropFoo.bar', 'new value');

しかし、制御できない外部オブジェクトにテンプレートをバインドしたい場合はどうすればよいでしょうか? たとえば、外部コードは に依存せず、 を呼び出さないため、これは変更{{window.globalFoo.bar}}にバインドされません。barPolymerthis.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.setおよび を呼び出しますthis.push。
それらはすべて、対応する非バブリング (キャプチャ)globalFoo-changedカスタム イベントをディスパッチします (必要な場合のみ)。

イベントが要素global-foo-changedのみに影響するのはなぜですか?this

  1. global-foo-changedイベントがキャプチャされます (非バブリング)。
  2. ポリマー要素は、デフォルトでバブリング イベントをリッスンします。
  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 は、そのような変更をシステムに通知できるようにする 2 つのメソッドを提供します。

于 2015-09-18T14:23:14.973 に答える