Polimer, tolong perhatikan jalur globalnya

Di Polymer 1.0 Anda dapat menghapus {{localPropFoo.bar}} dan bar akan diamati perubahannya jika Anda menggunakan this.set('localPropFoo.bar', 'new value'); untuk memperbarui nilainya.

Namun apa yang harus dilakukan jika Anda ingin mengikat template ke objek eksternal yang berada di luar kendali Anda? Misalnya, {{window.globalFoo.bar}} ini tidak akan terikat pada bar perubahan karena kode eksternal tidak bergantung pada Polymer dan tidak memanggil this.set.

Demo tentang codepen

Menggunakan Object.observe secara manual memerlukan kode tambahan dan tidak berfungsi di FireFox (pemeriksaan kotor observe.js ke Penyelamatan).

Saya ingin tahu apa cara idiomatis pengikatan data ke objek eksternal di luar kendali Anda.


polymer globals object.observe
person ilyaigpetrov    schedule 12.09.2015    source sumber
comment
Sudahkah Anda mencoba sinyal besi? Ia dapat mendengarkan peristiwa iron-signal-* apa pun lokasinya di DOM.   -  person Neil John Ramal    schedule 12.09.2015
comment
Cara idiomatisnya adalah dengan tidak mengikat objek eksternal di luar kendali Anda. Apakah Anda menggunakan perpustakaan lain yang mengaturnya? Jika Anda mengontrol seluruh aplikasi, maka hal itu tidak diperlukan.   -  person Andrey    schedule 12.09.2015
comment
observasi-js adalah satu-satunya penolong Anda di sini, tetapi ini adalah pendekatan yang kikuk   -  person Andrey    schedule 12.09.2015
comment
@Andrey Saya menggunakan perpustakaan saya sendiri yang saya tidak ingin bergantung pada Polimer, tapi saya bisa membuatnya memancarkan peristiwa dengan cara tertentu, mungkin dengan EventEmitter Node.   -  person ilyaigpetrov    schedule 12.09.2015
comment
@ilyaigpetrov Anda dapat menggunakan acara JS asli   -  person Andrey    schedule 12.09.2015
comment
Anda selalu dapat meneruskan perubahan melalui acara khusus, begini caranya polimer mencapai pengamatan.   -  person wener    schedule 13.09.2015

Jawaban (1)


arrow_upward
0
arrow_downward

Polymer tidak melakukan observasi out of the box, karena:

  1. Object.observe dukungan tidak ada di mana-mana dan pemeriksaan kotor itu mahal.
  2. Object.observe mungkin mahal untuk dirinya sendiri.

Solusi yang Seharusnya

Catat sendiri perubahannya, hubungi notifyPath, this.fire('global-foo-changed', {path: 'globalFoo.bar', value:...}, this.set, dan this.push.
Mereka semua mengirimkan peristiwa khusus non-bubbling (menangkap) globalFoo-changed yang sesuai (hanya bila diperlukan).

Mengapa peristiwa global-foo-changed saya hanya memengaruhi elemen this?

  1. global-foo-changed peristiwa terekam (tidak menggelembung).
  2. Elemen polimer mendengarkan peristiwa menggelegak secara default.
  3. Untuk beberapa alasan, pendengar yang menangkap ini menangkap peristiwa gelembung yang dikirim dari elemen yang sama (bukan dari turunannya). Demo tentang codepen.

Anda dapat menambal polimer dengan perilaku ini (Saya tidak mengerti cara kerjanya):

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);
  }
};

Mengapa Tidak Ada Pengamatan di Luar Kotak

...terkadang kode penting perlu mengubah sub-properti objek secara langsung. Karena kita menghindari mekanisme pengamatan yang lebih canggih seperti Object.observe atau pemeriksaan kotor untuk mencapai kinerja startup dan runtime lintas platform terbaik untuk kasus penggunaan paling umum, mengubah sub-properti suatu objek secara langsung memerlukan kerja sama dari pengguna.

Secara khusus, Polymer menyediakan dua metode yang memungkinkan perubahan tersebut diberitahukan ke sistem: notifyPath(path, value) dan set(path, value), dengan path adalah string yang mengidentifikasi jalur (relatif terhadap elemen host).

person ilyaigpetrov    schedule 18.09.2015