Cara Pengikatan Teks dan Penampilan 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 "kelihatan" dan "tersembunyi"
• Ikatan "teks"
• Ikatan "html"
• Ikatan "kelas" dan "css"
• Ikatan "gaya"
• Ikatan "attr"

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.

Mengawal Teks dan Rupa

Kelihatan

ikatan boleh dilihat digunakan untuk mengawal keterlihatan elemen HTML berdasarkan nilai boleh diperhatikan dalam ViewModelnya. Ia membolehkan anda untuk menunjukkan atau menyembunyikan elemen berdasarkan keadaan tertentu yang ditakrifkan dalam ViewModel anda.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

Apabila keadaan ialah nilai yang serupa dengan palsu (palsu, 0, batal atau tidak ditentukan), ikatan yang boleh dilihat menetapkan gaya kepada tiada, menyebabkan ia disembunyikan. Ini mengambil keutamaan berbanding mana-mana gaya paparan yang boleh anda tetapkan menggunakan CSS.

Tersembunyi

binding hidden digunakan untuk menyembunyikan elemen HTML berdasarkan nilai observable daripada ViewModel anda. Tidak seperti pengikatan *kelihatan*, yang mengawal keterlihatan elemen, pengikatan *tersembunyi* menyembunyikan elemen UI apabila syarat yang ditentukan dipenuhi.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Teks

Teks mengikat digunakan untuk mengemas kini kandungan elemen HTML dengan nilai boleh diperhatikan daripada ViewModelnya. Ia membenarkan teks boleh diperhatikan untuk dimasukkan terus ke dalam elemen HTML, memastikan bahawa sebarang perubahan dalam nilai boleh diperhatikan secara automatik ditunjukkan dalam teks yang dipaparkan.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

Jika parameter ini ialah nilai boleh diperhatikan, pengikatan akan mengemas kini teks elemen apabila nilai berubah. Jika parameter tidak boleh diperhatikan, ia akan menetapkan teks elemen sekali sahaja dan tidak akan mengemas kininya lagi kemudian.

Jika nilai yang diberikan adalah sesuatu selain daripada nombor atau rentetan, teks yang dipaparkan akan bersamaan dengan yourParameter.toString().

Oleh kerana pengikatan ini menetapkan nilai teksnya menggunakan nod teks, adalah selamat untuk menetapkan sebarang nilai rentetan tanpa mengambil risiko suntikan HTML atau skrip.

HTML

mengikat html digunakan untuk memasukkan kandungan HTML dinamik ke dalam elemen UI anda. Ia membenarkan kandungan elemen dikemas kini dengan HTML yang dihasilkan daripada boleh diperhatikan atau ungkapan daripada ViewModelnya.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

KnockoutJs mengosongkan kandungan sebelumnya dan kemudian menetapkan kandungan elemen kepada nilai parameter menggunakan fungsi html jQuery atau menghuraikan rentetan ke dalam nod HTML dan menambahkan setiap nod sebagai anak elemen, jika jQuery bukan tersedia.

Jika parameter ini boleh diperhatikan, pengikatan akan mengemas kini kandungan elemen apabila nilai berubah. Jika parameter tidak boleh diperhatikan, ia akan menetapkan kandungan elemen sekali sahaja dan tidak akan mengemas kininya lagi kemudian.

Jika nilai yang diberikan adalah sesuatu selain daripada nombor atau rentetan, teks yang dipaparkan akan bersamaan dengan yourParameter.toString().

Kelas

Kelas mengikat digunakan untuk mengawal kelas CSS yang digunakan pada elemen HTML berdasarkan nilai boleh diperhatikan atau ungkapan ViewModelnya. Ini membolehkan anda menukar kelas CSS elemen secara dinamik berdasarkan keadaan atau keadaan aplikasi anda yang berbeza. Kelas bukanlah nama pengecam yang sah, cara yang betul untuk menetapkan kelas kepada elemen HTML ialah dengan menyertakan nama pengecam dalam tanda petikan supaya ia menjadi rentetan literal.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Nilai parameter mestilah rentetan yang sepadan dengan kelas CSS yang anda ingin tambahkan pada elemen. Jika parameter merujuk kepada observable, pengikatan mengemas kini kelas apabila nilai berubah, mengalih keluar mana-mana kelas yang ditambah sebelum ini dan menambah kelas atau kelas nilai baharu.

CSS

mengikat css digunakan untuk menggunakan gaya CSS secara dinamik pada elemen HTML berdasarkan nilai boleh diperhatikan atau ungkapan ViewModelnya. Ini membolehkan anda menukar gaya visual elemen berdasarkan keadaan atau keadaan aplikasi anda yang berbeza. Anda boleh menentukan berbilang kelas CSS berdasarkan keadaan yang sama dengan melampirkan nama dalam tanda petikan.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

Objek JavaScript mesti dihantar dengan nama sifat ialah kelas CSS anda dan nilainya dinilai kepada benar atau salah bergantung pada sama ada kelas itu perlu digunakan pada masa itu.

Jika parameter merujuk kepada nilai observable, pengikatan akan menambah atau mengalih keluar kelas CSS apabila observable berubah. Jika parameter tidak merujuk kepada observable, ia akan menambah atau mengalih keluar kelas sekali sahaja dan tidak akan melakukannya lagi kemudian.

gaya

Gaya mengikat digunakan untuk menggunakan gaya CSS sebaris pada elemen HTML berdasarkan nilai boleh diperhatikan atau ungkapan ViewModelnya. Ini membolehkan anda menukar gaya visual elemen secara terus sebaris, berdasarkan keadaan atau keadaan aplikasi anda yang berbeza.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

Objek JavaScript mesti dihantar di mana nama sifat sepadan dengan nama gaya dan nilai sepadan dengan nilai gaya yang anda mahu gunakan.

Jika parameter merujuk kepada boleh diperhatikan, pengikatan akan mengemas kini gaya apabila boleh diperhatikan berubah. Jika parameter tidak merujuk kepada observable, ia hanya akan menetapkan gaya sekali sahaja dan tidak mengemas kininya kemudian.

Jika anda ingin menggunakan gaya yang namanya bukan pengecam JavaScript yang sah (kerana ia mengandungi tanda sempang atau sesuatu seperti itu), anda boleh melampirkannya dalam tanda petikan atau menggunakan nama dengan camelCase gaya.

• { 'font-weight': someValue }
• { fonBerat: someValue }

Jika anda menggunakan nilai angka mudah pada gaya yang memerlukan unit, KnockoutJs akan menambahkan px pada nilai sebelum menetapkan gaya.

Attr

Attr mengikat digunakan untuk menetapkan atau mengemas kini atribut HTML pada elemen berdasarkan nilai ungkapan boleh diperhatikan atau ViewModel. Ini membolehkan anda menukar atribut elemen HTML secara dinamik, berdasarkan keadaan atau keadaan aplikasi anda yang berbeza.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Objek JavaScript mesti dihantar di mana nama sifat sepadan dengan nama atribut dan nilai sepadan dengan nilai atribut yang ingin anda gunakan.

Jika parameter merujuk kepada observable, pengikatan akan mengemas kini atribut apabila observable berubah. Jika parameter tidak merujuk kepada observable, ia hanya menetapkan atribut sekali sahaja dan tidak mengemas kininya kemudian.

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