Bagaimana Control Flow Bindings berfungsi dalam KnockoutJs

Kandungan ini pada asasnya adalah terjemahan bahan asal. Hasratnya adalah untuk mengetahui tentang KnockoutJs untuk Magento 2 dan mencipta kandungan dalam bahasa Portugis tentang KnockouJs.

Dokumentasi

• Sintaks pengikat data
• Konteks mengikat
• Ikatan "foreach"
• Ikatan "jika" dan "jika tidak"
• Ikatan "dengan" dan "menggunakan"
• Ikatan "biar"

---

Pengikatan

Dalam KnockoutJs, binding ialah cara untuk menyambung logik ViewModel (data dan logik perniagaan) dengan View (HTML). Ringkasnya, melalui binding antara muka pengguna secara automatik mencerminkan perubahan dalam data anda, tanpa perlu memanipulasi DOM secara langsung.

Pengikatan dalam KnockoutJs berfungsi melalui atribut data-bind pada elemen HTML. Atribut ini ialah tempat anda menentukan pengikatan yang anda mahu gunakan dan nilai yang berkaitan.

Aliran Kawalan

foreach

Foreach mengikat digunakan untuk membuat ulangan dalam elemen HTML, menjana salinan elemen yang sama untuk setiap item dalam koleksi (seperti tatasusunan atau tatasusunan boleh diperhatikan ) dalam model paparan anda. Ini membolehkan anda membuat senarai atau jadual pangsi dengan mudah yang memaparkan data daripada model anda.

Apabila kandungan model array diubah suai (dengan menambah, mengalihkan atau memadamkan entrinya), mengikat daripada foreach menggunakan algoritma yang cekap untuk mencari apa yang berubah, jadi anda boleh mengemas kini DOM mengikut tatasusunan. Ini bermakna ia boleh mengendalikan gabungan arbitrari perubahan simulasi.

• Apabila sesuatu ditambahkan pada tatasusunan, foreach akan memaparkan salinan baharu model anda dan memasukkannya ke dalam DOM sedia ada;
• Apabila sesuatu dalam tatasusunan dipadamkan, foreach hanya akan mengalih keluar elemen DOM yang sepadan;
• Apabila menyusun semula sesuatu dalam tatasusunan (mengekalkan contoh objek yang sama), foreach biasanya hanya akan mengalihkan elemen DOM yang sepadan ke kedudukan baharunya.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

Dalam kes ini, pembolehubah $data merujuk item semasa yang sedang diproses dalam gelung. Ini membolehkan anda mengakses sifat atau nilai item itu dalam gelung.

Arahan sebagai membolehkan anda mentakrifkan nama tersuai untuk pembolehubah yang mewakili item semasa dalam kitaran lelaran setiap. Ini boleh menjadikan kod lebih mudah dibaca dan bermakna.

Kadangkala item dalam array perlu tidak dipadamkan, sebaliknya disembunyikan, tanpa benar-benar kehilangan jejak kewujudannya. Ini dikenali sebagai pemadaman tidak merosakkan. Jika anda perlu menyembunyikan entri yang dimusnahkan, tetapkan pilihan includeDestroyed kepada palsu.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

Jika anda perlu melakukan logik tersuai tambahan pada elemen DOM yang dijana, anda boleh menggunakan mana-mana panggilan balik berikut:

• afterRender: digunakan setiap kali blok foreach diduplikasi dan dimasukkan ke dalam dokumen, kedua-duanya apabila foreach dimulakan buat kali pertama dan apabila entri baharu kemudiannya ditambahkan pada array;
yang berkaitan
• afterAdd: adalah seperti afterRender, kecuali ia digunakan hanya apabila entri baharu ditambahkan pada array (dan bukan apabila foreach mula-mula melelang ke atas kandungan awal array);
• beforeRemove: digunakan apabila item daripada array dialih keluar, tetapi sebelum nod DOM yang sepadan dialih keluar. Jika panggilan balik beforeRemove ditentukan, anda perlu mengalih keluar nod DOM secara manual, iaitu KnockoutJs tidak dapat mengetahui bila ia akan dibenarkan untuk mengalih keluar nod DOM secara fizikal;
• beforeMove: digunakan apabila item daripada array telah menukar kedudukan dalam array, tetapi sebelum nod DOM yang sepadan telah dialihkan. Ambil perhatian bahawa beforeMove digunakan pada semua elemen tatasusunan yang indeksnya telah berubah, jadi jika item baharu dimasukkan pada permulaan tatasusunan, panggilan balik (jika dinyatakan) akan dicetuskan untuk semua elemen lain, sebagai indeksnya kedudukan telah meningkat satu. Anda boleh menggunakan beforeMove untuk menyimpan koordinat skrin asal bagi elemen yang terjejas supaya anda boleh menghidupkan pergerakannya dalam panggilan balik afterMove;
• afterMove: digunakan selepas item daripada array telah menukar kedudukan dalam array dan selepas foreach telah mengemas kini DOM untuk dipadankan. Ambil perhatian bahawa afterMove digunakan pada semua elemen array yang indeksnya telah berubah, jadi jika item baharu dimasukkan pada permulaan array, panggilan balik (jika dinyatakan) akan dicetuskan untuk semua elemen lain sejak kedudukan indeks mereka telah meningkat sebanyak satu.

jika dan jika tidak

pengikatan if menyebabkan bahagian penanda muncul dalam dokumen anda (dan atribut pengikatan datanya digunakan), hanya jika ungkapan tertentu dinilai kepada benar (atau nilai benar , seperti objek bukan nol atau rentetan bukan kosong).

ifnot's binding berfungsi sama seperti if binding, kecuali ia menyongsangkan hasil daripada sebarang ungkapan yang dihantar kepadanya.

jika dan jika tidak memainkan peranan yang serupa dengan pengikatan yang boleh dilihat dan tersembunyi. Perbezaannya ialah, dengan penanda yang boleh dilihat, sentiasa kekal dalam DOM dan sentiasa menggunakan pengikatan datanya – pengikatan boleh dilihat hanya menggunakan CSS untuk menogol keterlihatan elemen yang mengandungi. Walau bagaimanapun, pautan if menambahkan atau mengalih keluar penanda yang terkandung dalam DOM anda secara fizikal dan hanya menggunakan pautan kepada keturunan jika ungkapan itu benar. Jika ungkapan itu melibatkan beberapa nilai yang boleh diperhatikan, ungkapan itu akan dinilai semula apabila nilainya berubah.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

dengan dan menggunakan

Ikatan dengan dan menggunakan mencipta konteks mengikat baharu, supaya unsur turunan diikat dalam konteks objek tertentu.

mengikat dengan akan menambah atau mengalih keluar elemen turunan secara dinamik bergantung pada sama ada nilai yang berkaitan adalah palsu.

Pilihan membolehkan anda mentakrifkan alias untuk objek konteks baharu. Walaupun boleh merujuk kepada objek menggunakan $data.
pembolehubah konteks

<div data-bind='foreach: { data: myArray, includeDestroyed: false }'>
    ...
</div>

Pengikatan menggunakan telah diperkenalkan dalam KnockoutJs 3.5 sebagai pengganti dengan apabila pemaparan unsur keturunan tidak diingini. Oleh kerana menggunakan menilai semula sambungan keturunan dan bukannya menyampaikan semula, setiap sambungan keturunan akan menyertakan pergantungan tambahan pada konteks penggunaan.

biarkan

Biar mengikat membolehkan anda menentukan sifat konteks mengikat tersuai yang boleh anda rujuk dalam pengikatan semua unsur keturunan.

<div data-bind="if: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for verdadeiro.</p>
</div>

<div data-bind="ifnot: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for falso.</p>
</div>

Atas ialah kandungan terperinci Bagaimana Control Flow Bindings berfungsi dalam KnockoutJs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!