Panduan Pemula untuk Knockoutjs: Bahagian 3

3

Kunci Takeaways

Gunakan `foreach` mengikat dalam knockoutjs untuk secara automatik menduplikasi dan mengikat bahagian markup untuk setiap item dalam array, seperti baris jadual menjana secara dinamik atau senarai berdasarkan data array.

memanfaatkan pseudovariables seperti `$ data`,` $ ibu bapa`, `$ ibu bapa`, dan` $ root` dalam pengikatan bersarang untuk mengakses dan memanipulasi data dari pelbagai tahap hierarki model pandangan anda dengan berkesan.

Melaksanakan `if` dan` dengan` pengikatan untuk membuat bahagian -bahagian UI anda dan menubuhkan konteks mengikat baru, meningkatkan dinamisme dan kebolehbacaan aplikasi anda.

meneroka keupayaan templating KnockoutJS, yang membolehkan kedua-dua templat asli menggunakan pengikatan aliran kawalan dan senario lanjutan menggunakan pengikatan `template` dengan pilihan untuk lulus parameter tambahan dan panggil balik.

Memperluaskan pemerhatian kalah mati dan buat pengikatan tersuai untuk merangkum tingkah laku dan interaksi yang kompleks, menyediakan penyelesaian yang boleh diguna semula yang mengekalkan kod yang bersih dan terkawal.
• Panduan Pemula untuk Knockoutjs: Templating dan Lagi
• Terdapat empat pengikatan aliran kawalan: foreach, jika, ifnot dan dengan. Pengikatan kawalan ini membolehkan anda menentukan secara mendefinisikan logik aliran kawalan tanpa membuat templat bernama seperti yang anda lihat di bawah.
• Foreach mengikat pendua seksyen markup untuk setiap entri dalam array, dan mengikat setiap salinan markup itu ke item array yang sepadan. Ini sesuai untuk senarai atau jadual rendering. Jika array anda adalah array yang boleh dilihat, apabila anda kemudian menambah atau mengeluarkan entri array, pengikatan akan mengemas kini UI untuk dipadankan dengan memasukkan atau mengeluarkan lebih banyak salinan item senarai atau baris jadual, tanpa menjejaskan unsur -unsur DOM yang lain. Lihat contoh berikut:
di sini, baris jadual akan dibuat secara automatik untuk setiap entri array dalam array buku.

Kadang -kadang anda mungkin perlu merujuk kepada entri array itu sendiri dan bukan hanya salah satu sifatnya. Dalam hal ini, anda boleh menggunakan data Pseudovariable $. Ini bermaksud "item semasa", apabila digunakan dalam blok foreach.

ini akan menyenaraikan sepanjang hari dalam seminggu tanpa perlu mengulangi kod untuk setiap item secara berasingan.

Dalam kalah mati, anda boleh bersarang sebagai pengikat aliran kawalan yang anda kehendaki. Dan apabila anda berbuat demikian, ia sering diingini untuk mencapai sandaran hierarki dan data akses atau fungsi dari konteks ibu bapa. Dalam kes sedemikian, anda boleh menggunakan pseudovariables berikut:

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

$ ibu bapa - mewakili item data di luar blok foreach semasa

$ ibu bapa-adalah array yang mewakili item data dari semua skop aliran kawalan luar. $ ibu bapa [0] adalah sama dengan ibu bapa $. $ ibu bapa [1] mewakili item dari skop aliran kawalan nenek, dan sebagainya.

$ root-mewakili item dari skop aliran kawalan luar paling luar. Biasanya ini adalah objek model paparan peringkat tertinggi anda.

Dalam contoh berikut, kami menggunakan pseudovariable ibu bapa $ untuk menghapuskan item buku dengan betul dari array buku:

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

Dalam beberapa kes, anda mungkin mahu menduplikasi seksyen markup, tetapi anda tidak mempunyai unsur kontena yang mana untuk meletakkan pengikat foreach. Kemudian anda boleh menggunakan sintaks berikut:

<ul data-bind="foreach: daysOfWeek">
 <li>
 <span data-bind="text: $data"></span>
 </li>
</ul>

<script type="text/javascript">
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
   'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
};

ko.applyBindings(new viewModel());
</script>

Dalam contoh ini, anda tidak boleh menggunakan pengikatan foreach biasa. Jika anda meletakkannya pada

ini akan menduplikasi item header, dan jika anda ingin meletakkan bekas selanjutnya di dalam
anda tidak boleh kerana hanya
• elemen dibenarkan di dalam
  s. Penyelesaiannya adalah menggunakan sintaks aliran kawalan tanpa kontena di mana komen dan menentukan "elemen maya" yang mengandungi markup di dalam, yang mana sintaks knockout memahami dan mengikat Elemen maya ini seolah -olah anda mempunyai elemen kontena sebenar. Sintaks jenis ini juga sah untuk jika dan dengan pengikatan.

  IF mengikat menyebabkan seksyen markup muncul dalam dokumen anda, hanya jika ungkapan yang ditentukan menilai benar. Kemudian markup yang terkandung akan hadir dalam dokumen, dan sebarang atribut mengikat data di atasnya akan digunakan. Sebaliknya, jika ungkapan anda menilai palsu, markup yang terkandung akan dikeluarkan dari dokumen anda tanpa terlebih dahulu memohon sebarang pengikatan kepadanya.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  dengan mengikat mencipta konteks mengikat baru, supaya unsur -unsur keturunan terikat dalam konteks objek yang ditentukan. Objek yang anda mahu gunakan sebagai konteks untuk mengikat unsur -unsur keturunan. Sekiranya ungkapan yang anda berikan menilai kepada batal atau tidak ditentukan, unsur -unsur keturunan tidak akan terikat sama sekali, tetapi sebaliknya akan dikeluarkan dari dokumen. Dengan mengikat mengubah konteks data ke objek apa pun yang anda tentukan. Ini amat berguna apabila berurusan dengan graf objek dengan pelbagai hubungan ibu bapa/kanak -kanak.

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  templating

  Templat mengikat memaparkan elemen DOM yang berkaitan dengan hasil membuat templat. Templat adalah cara yang mudah dan mudah untuk membina struktur UI yang canggih - mungkin dengan blok berulang atau bersarang - sebagai fungsi data model pandangan anda. Terdapat dua cara utama menggunakan templat. Yang pertama, templat asli, adalah mekanisme yang menyokong foreach, jika, dengan, dan pengikatan aliran kawalan lain. Secara dalaman, pengikatan aliran kawalan menangkap markup HTML yang terkandung di dalam elemen anda, dan menggunakannya sebagai templat untuk menyebabkan item data sewenang-wenangnya. Ciri ini dibina dalam kalah mati dan tidak memerlukan mana -mana perpustakaan luaran. Anda dapat melihat skema asas untuk membuat templat di sini:

  <label><input type="checkbox" data-bind="checked: showList" />Show me list</label>
  <ul data-bind="if: showList">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  
  <script type="text/javascript">
     function viewModel() {
      var self = this;
      self.showList = ko.observable(false);
     }
    ko.applyBindings(new viewModel());    
  </script>

  Dalam contoh berikut, anda dapat melihat cara menggunakannya dalam tindakan:

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  di sini, kita mesti menggunakan ID sama dengan nama templat untuk mengikat templat ke seluruh markup kami. Dalam kes ini ia adalah 'template buku'.

  Daripada menggunakan sintaks pendek yang diterangkan di atas, kita boleh lulus lebih banyak parameter ke mengikat templat, yang akan memberi kita kawalan yang lebih tepat ke atas output akhir.

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  di sini, namanya adalah id elemen yang mengandungi templat yang anda ingin berikan; Data adalah objek untuk membekalkan sebagai data untuk templat untuk diberikan; dan Afterrender adalah fungsi panggil balik yang akan dipanggil terhadap elemen DOM yang diberikan.

  Contoh berikut adalah bersamaan dengan mengikat foreach. Di sini, foreach diluluskan sebagai parameter ke mengikat templat.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  anda boleh mendapatkan hasil yang sama dengan membenamkan templat tanpa nama secara langsung di dalam elemen yang anda gunakan mengikat foreach:

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  Cara kedua menggunakan templat adalah untuk menyambung kalah mati ke enjin template pihak ketiga. Knockout akan lulus nilai model anda ke enjin templat luaran dan menyuntik rentetan markup yang terhasil ke dalam dokumen anda. Untuk contoh yang menggunakan enjin template jQuery.tmpl dan underscore semak dokumentasi.

  Memperluas Observables

  Observables Knockout menyediakan ciri -ciri asas yang diperlukan untuk menyokong nilai bacaan/penulisan dan memberitahu pelanggan apabila nilai itu berubah. Walau bagaimanapun, dalam beberapa kes, anda mungkin ingin menambah fungsi tambahan kepada yang dapat dilihat seperti menambahkan sifat tambahan kepada yang dapat dilihat. Pemanjangan kalah mati menyediakan cara yang mudah dan fleksibel untuk melakukannya.

  Mewujudkan extender melibatkan menambah fungsi ke objek KO.Extender. Fungsi ini dapat dilihat sebagai hujah pertama dan sebarang pilihan dalam hujah kedua. Ia kemudiannya boleh mengembalikan yang dapat dilihat atau mengembalikan sesuatu yang baru seperti yang boleh diperhatikan yang menggunakan asal yang dapat dilihat dalam beberapa cara.

  Sekarang kita akan membuat extender yang dapat dilihat yang akan menambah keupayaan untuk menunjukkan mesej petunjuk.

  <label><input type="checkbox" data-bind="checked: showList" />Show me list</label>
  <ul data-bind="if: showList">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  
  <script type="text/javascript">
     function viewModel() {
      var self = this;
      self.showList = ko.observable(false);
     }
    ko.applyBindings(new viewModel());    
  </script>

  Bindings Custom

  pengikatan terbina dalam knockout membolehkan anda mengendalikan senario yang paling mengikat, tetapi jika anda menghadapi senario mengikat khusus yang tidak dilindungi, anda boleh membuat pengikatan tersuai dengan knockout yang memberi anda banyak fleksibiliti untuk merangkum tingkah laku yang canggih di an cara yang mudah digunakan semula. Sebagai contoh, anda boleh membuat komponen interaktif seperti grid, tabset, dan sebagainya, dalam bentuk pengikatan adat.

  Pengikatan knockout terdiri daripada dua kaedah: init dan kemas kini. Membuat mengikat adalah semudah membuat objek dengan kedua -dua kaedah ini dan mendaftarkan objek itu dengan kalah mati menggunakan ko.bindinghandlers seperti yang ditunjukkan di bawah.

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  Fungsi init hanya akan dijalankan pada kali pertama bahawa pengikatan dinilai untuk elemen ini. Ini biasanya digunakan untuk menjalankan kod inisialisasi satu kali atau untuk mengendalikan pengendali acara yang membolehkan anda mengemas kini model pandangan anda berdasarkan peristiwa yang dicetuskan dalam UI anda.

  Fungsi kemas kini menyediakan cara untuk bertindak balas apabila pemerhatian yang berkaitan diubahsuai. Biasanya, ini digunakan untuk mengemas kini UI anda berdasarkan perubahan pada model pandangan anda.

  fungsi init dan kemas kini dibekalkan empat parameter. Umumnya, anda akan mahu memberi tumpuan kepada elemen dan parameter ValueAccessor, kerana ia adalah cara standard untuk menghubungkan model pandangan anda ke UI anda. Anda sebenarnya tidak perlu menyediakan kedua -dua init dan mengemas kini panggilan balik - anda hanya boleh menyediakan satu atau yang lain jika itu semua yang anda perlukan.

  Parameter elemen memberi anda akses langsung kepada elemen DOM yang mengandungi pengikatan.

  Parameter ValueAccessor adalah fungsi yang memberi anda akses kepada apa yang telah diserahkan kepada pengikatan. Sekiranya anda melepasi yang dapat dilihat, maka hasil fungsi ini akan diperhatikan (bukan nilai itu). Jika anda menggunakan ungkapan dalam mengikat, maka hasil dari ValueAccessor akan menjadi hasil dari ungkapan.

  Parameter AllBIdingSaccessor memberi anda akses kepada semua pengikatan lain yang disenaraikan dalam atribut mengikat data yang sama. Ini biasanya digunakan untuk mengakses pengikatan lain yang berinteraksi dengan mengikat ini. Pengikatan ini mungkin tidak akan mempunyai sebarang kod yang berkaitan dengan mereka dan hanya satu cara untuk lulus pilihan tambahan kepada pengikatan, melainkan jika anda memilih untuk meluluskan objek dengan pelbagai sifat ke dalam pengikatan utama anda. Sebagai contoh, optionsValue, optionStext, dan optionscaption adalah pengikatan yang hanya digunakan untuk lulus pilihan ke pilihan yang mengikat.

  Parameter ViewModel akan menyediakan akses kepada model paparan keseluruhan anda untuk pengikatan di luar templat. Di dalam templat, ini akan ditetapkan pada data yang terikat pada templat. Sebagai contoh, apabila menggunakan pilihan Foreach untuk mengikat templat, parameter ViewModel akan ditetapkan kepada ahli array semasa yang dihantar melalui templat. Kebanyakan masa ValueAccessor akan memberi anda data yang anda inginkan, tetapi parameter ViewModel amat berguna jika anda memerlukan objek untuk menjadi sasaran anda apabila anda memanggil/memohon fungsi.

  Dalam contoh berikut, kami akan membuat pengikatan tersuai yang skala tekstaria apabila ia fokus.

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  Pertama, dalam fungsi init kita mengisytiharkan bahawa apabila elemen menjadi tumpuan maka nilainya akan ditetapkan kepada benar, dan sebaliknya. Kemudian dalam fungsi kemas kini kami menggunakan parameter AllbindingAccessor untuk menambah pilihan tambahan kepada pengikatan kami - skala dan scaledown. Kami menggunakan ko.utils.unwrapobservable untuk mendapatkan nilai mengikat semasa dan periksa sama ada ia ditetapkan untuk benar. Jika ya, elemen DOM ditingkatkan, jika tidak, ia diturunkan.

  Akhirnya mari kita lihat contoh yang menggabungkan petunjuk extender yang dapat dilihat dan Scaleonfocus mengikat adat:

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  Anda boleh meletakkan petunjuk yang dapat dilihat dan Scaleonfocus mengikat dalam fail berasingan dan kemudian termasuk mereka dalam fail utama. Ini menjadikan kod modular dan membolehkan anda menggunakannya semula bila-bila masa yang anda mahukan.

  itu, orang -orang! Saya harap anda menikmati siri ini. Sekarang anda mempunyai pengetahuan yang diperlukan untuk memulakan dan terus belajar dan bereksperimen dengan kalah mati. Untuk contoh dan tutorial yang lebih komprehensif, anda boleh pergi ke tapak knockout, yang saya cadangkan anda lakukan.

  soalan yang sering ditanya mengenai knockoutjs

  Apakah tujuan ko.utils.unwrapobservable dalam kalah mati? Fungsi ini amat berguna apabila anda tidak pasti jika anda berurusan dengan yang dapat dilihat atau tidak dapat diamati. Ia membolehkan anda mengendalikan kedua -dua kes tanpa perlu menulis kod berasingan untuk setiap. Fungsi ini adalah sebahagian daripada fungsi utiliti knockoutjs yang menyediakan fungsi tambahan untuk membuat kerja dengan lebih mudah. pelbagai item ke bahagian HTML anda. Ia mereplikasi elemen DOM yang berkaitan dan keturunannya untuk setiap item dalam array, membuat gelung. Ini amat berguna apabila anda ingin memaparkan senarai item dalam UI anda. Pengikatan foreach juga menyediakan konteks untuk setiap lelaran, yang membolehkan anda mengakses item semasa menggunakan kata kunci data $. Utiliti yang membantu anda menukar objek JSON anda ke dalam objek yang dapat dilihat. Ini amat berguna apabila anda bekerja dengan data dari pelayan. Plugin pemetaan membolehkan anda memetakan data anda dengan mudah ke model pandangan anda, dan juga menyediakan pilihan untuk menyesuaikan proses pemetaan. Dalam knockoutjs dibuat mudah dengan bantuan tatasusunan yang dapat dilihat. Array yang boleh diperhatikan adalah jenis khas yang dapat dilihat yang memegang pelbagai nilai. Mereka menyediakan fungsi untuk memanipulasi array seperti push, pop, shift, unshift, reverse, sort, dan splice. Arahan yang boleh diperhatikan juga memberitahu pelanggan apabila item ditambah atau dikeluarkan, menjadikannya mudah untuk memastikan UI anda selaras dengan data anda. Jika anda telah menemui masalah di knockoutjs, anda boleh melaporkannya di halaman github knockoutjs. Sebelum melaporkan isu, adalah idea yang baik untuk memeriksa sama ada isu itu telah dilaporkan oleh orang lain. Sekiranya tidak, anda boleh membuat isu baru dan memberikan sebanyak mungkin untuk membantu pasukan knockoutjs memahami dan menyelesaikan masalah.

  Bagaimanakah saya boleh menggunakan pemerhatian yang dikira dalam knockoutjs?

  Mengira Observables dalam knockoutjs adalah fungsi yang bergantung kepada satu atau lebih yang lain yang boleh diperhatikan, dan akan mengemas kini secara automatik apabila mana -mana kebergantungan ini berubah. Pemantauan yang dikira berguna apabila anda ingin menggabungkan atau memanipulasi pemerhatian dalam beberapa cara. Untuk membuat yang boleh diperhatikan, anda boleh menggunakan fungsi KO.COMPUTED. Fokus, antara lain. Pengikatan ini membolehkan anda menentukan fungsi JavaScript untuk dilaksanakan apabila peristiwa yang berkaitan berlaku. Fungsi ini boleh menjadi sebahagian daripada model pandangan anda atau fungsi yang berdiri sendiri. digunakan seperti pengikatan terbina dalam. Ini amat berguna apabila anda ingin membuat kepingan fungsi yang boleh diguna semula. Untuk membuat pengikatan tersuai, anda boleh menggunakan objek KO.BINDINGHANDLERS. Anda boleh menggunakan Console.log untuk mencetak nilai, atau menggunakan titik putus untuk menjeda pelaksanaan dan memeriksa keadaan semasa permohonan anda. Knockoutjs juga menyediakan fungsi ko.tojson, yang boleh digunakan untuk menukar model pandangan anda ke dalam rentetan json untuk pemeriksaan mudah. ​​

  Bagaimana saya boleh menguji aplikasi knockoutjs? Selesai menggunakan rangka kerja ujian JavaScript seperti Jasmine atau Mocha. Rangka kerja ini membolehkan anda menulis ujian unit untuk model pandangan anda, memastikan bahawa mereka berkelakuan seperti yang diharapkan. Apabila menguji aplikasi knockoutjs, adalah idea yang baik untuk memisahkan model pandangan anda dari DOM sebanyak mungkin, untuk membuat ujian lebih mudah. ​​

Atas ialah kandungan terperinci Panduan Pemula untuk Knockoutjs: Bahagian 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!