Cara 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

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.

Atribut data-bind bukan asli kepada HTML, walaupun ia boleh diterima dengan sempurna (ia serasi sepenuhnya dengan HTML 5 dan tidak menyebabkan masalah dengan HTML 4. Tetapi kerana penyemak imbas tidak mengenali atribut ini secara lalai, anda perlu untuk membolehkan Kalah Mati untuk berkuat kuasa.

Sintaks mengikat

Sistem pengikatan deklaratif KnockoutJs menyediakan cara yang ringkas dan berkuasa untuk mengikat data ke UI. Ia biasanya mudah dan jelas untuk mengikat sifat data ringkas atau menggunakan pengikatan tunggal. Untuk pengikatan yang lebih kompleks, ia membantu untuk lebih memahami gelagat dan sintaks sistem pengikatan KnockoutJs.

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

Panggilan terdiri daripada dua item, nama dan nilai panggilan, dipisahkan dengan titik bertindih. Elemen boleh termasuk berbilang pautan (berkaitan atau tidak berkaitan), dengan setiap pautan dipisahkan dengan koma. Data yang digunakan dalam pengikatan semasa boleh dirujuk oleh objek. Objek ini dipanggil konteks mengikat (konteks mengikat).

Nilai mengikat boleh menjadi nilai tunggal, pembolehubah atau literal, atau hampir mana-mana ungkapan JavaScript yang sah.

Pautan boleh termasuk apa-apa jumlah ruang putih (ruang, tab dan baris baharu), jadi anda boleh menggunakannya untuk mengatur pautan anda mengikut cara yang anda mahukan.

Pautan boleh termasuk ulasan gaya JavaScript (//... dan /*...*/). Contohnya:

Jika pengikatan ditentukan tanpa nilai, KnockoutJs akan memberikan pengikatan nilai yang tidak ditentukan.

Hierarki konteks dicipta dan diurus secara automatik oleh KnockoutJS. Berikut menyenaraikan pelbagai jenis konteks mengikat yang disediakan oleh KO.

Variável de Contexto	Descrição
$root	Esta propriedade sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente esse é o objeto passado para ko.applyBindings.
$data	Esta propriedade é muito parecida com a palavra-chave this do Javascript. A propriedade $data em um contexto de ligação refere-se ao objeto ViewModel para o contexto atual.
$index	Esta propriedade contém o índice de um item atual de um array dentro de um loop foreach. O valor de $index mudará automaticamente conforme e quando a matriz Observable subjacente for atualizada. Obviamente, este contexto está disponível apenas para ligações foreach.
$parent	Esta propriedade refere-se ao objeto ViewModel pai. Isso é útil quando se deseja acessar propriedades externas do ViewModel de dentro de um loop aninhado.
$parentContext	Esta propriedade é diferente da $parent, pois a $parent refere-se a dados. Considerando que $parentContext refere-se ao contexto de ligação.
$rawdata	Este contexto contém o valor bruto do ViewModel na situação atual. Esta propriedade se assemelha a $data, mas a diferença é que, se o ViewModel for agrupado em Observable, então $data será apenas desembrulhado. O ViewModel e $rawdata tornam-se dados observáveis reais.
$component	Este contexto é usado para se referir ao ViewModel daquele componente, quando está dentro de um determinado componente.
$componentTemplateNodes	É uma representação de uma matriz de nós DOM passados para esse componente específico quando se está dentro de um modelo de componente específico.

Nama sambungan biasanya sepadan dengan sambungan berdaftar (terbina dalam atau tersuai) atau menjadi parameter untuk sambungan lain. Jika nama itu tidak sepadan dengan mana-mana daripada mereka, KnockoutJs akan mengabaikannya (tanpa sebarang ralat atau amaran). Jadi jika sambungan tidak berfungsi, semak dahulu sama ada nama itu betul.

Nilai mengikat boleh menjadi nilai tunggal, pembolehubah atau literal atau hampir mana-mana ungkapan JavaScript yang sah. Berikut ialah contoh pelbagai nilai sambungan:

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

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