Siapa pun yang telah memainkan KnockoutJs tahu bahwa ada fungsi yang kuat yang disebut komponen, dan salah satu hal luar biasa tentang komponen ini adalah bahwa ia memiliki viewmodel dan template sendiri, seperti berikut ini:
ko.components.register ('pesan-editor', {viewModel: function () {}, template: ""});Jelas, ViewModel adalah area fungsi fungsi, dan template adalah area templat, dan kemudian komponen terdaftar di Knockout melalui fungsi register. Mari kita tunjukkan fungsi sederhana di bawah ini, yaitu untuk secara dinamis menampilkan panjang panjang konten "input" saat ini.
<! Doctype html> <html> <head> <meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/> <itement> </itement> <meta charset = "utf-8"/> <script src = "jQuery-1.8.js"> </script "> </skrip> <cript> <cript src =" jQuery-1.8.js "> src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'komponen: "pesan-editor"'> </div> <script type = "text/javascript"> ko.components.register ('Parpar-editor', {viewModel: function (params) {this.text = editor = & & & & operper. '');}, template: 'pesan: <input data-bind = "value: text"/>'+ '(panjang: <span data-bind = "text: text (). length"> </span>)'}); ko.ApplyBindings (); </scrips> </span> </html>Silakan lihat lebih dekat kode ini. Komponen saat ini akan menyuntikkan templat templat ke dalam tag div dari HTML, dan ada juga pengikatan elemen teks dalam tag templat ini, dan sumber data ini (teks (). Panjang) kebetulan ini. Teks di viewmodel. ． Benar. . . Dengan integrasi keduanya, HTML terakhir kami ditampilkan sebagai berikut:
Selanjutnya, kami memasukkan beberapa angka dengan santai dan memindahkan mouse. Pada saat ini, acara perubahan input akan dipicu, seperti berikut ini.
Bukankah itu keren? ? ? Tentu saja, beberapa orang mungkin bertanya, bagaimana jika saya memberikan nilai default kecil ketika input diberikan? ? ? Apakah itu oke? Tentu saja, itu juga mungkin. Pada saat ini, kami dapat menetapkan nilai secara default dalam data-bind dan tidak apa-apa. . . Misalnya, berikut ini adalah:
<hody> <h4> instance kedua, lewat parameter </h4> <div data-bind = 'component: {name: "Message-editor", params: {initialText: "Hello, World!" }} '> </div> <script type = "text/javascript"> ko.components.register (' pesan-editor ', {viewModel: function (params) {this.text = ko.observable (params && params.initialtext ||' ');}, Template:' Params && params.initialtext || ');}, Template:' Params && Params.InitialText || ');}, Template:' Params. data-bind = "text: text (). length"> </span>) '}); ko.ApplyBindings (); </script> </body>Anda dapat melihat bahwa dalam kode di atas, saya menambahkan properti InitialText ke objek Params dalam komponen, dan pada saat ini, saya dapat secara dinamis menyuntikkan inisial ini ke dalam viewmodel kami, dan kemudian input dan rentang elemen kami berlangganan ini. Properti Pemantauan Teks di ViewModel ini melalui ikatan data. Pada saat ini, operasi pembaruan real-time terjadi. Saya tidak sabar untuk melihatnya ~
1: Analisis Masalah
Oke, melalui demonstrasi di atas, Anda mungkin telah menemukan dua masalah berikut. Masalah pertama adalah sangat kuat. Selama Anda mendaftar, Anda tidak perlu menerapkan ViewModel melalui ApplyBindings, yang akan mewujudkan modularisasi halaman, yang benar -benar nyaman ~ jadi masalah ini adalah hal yang baik. Masalah kedua adalah bahwa konten dalam templat templat kami adalah dalam bentuk "hard-coded", yaitu, jika ada banyak konten ini, seperti 100 baris dan 200 baris, apakah kita gila? ? ? Tidak peduli seberapa mampu Anda, Anda tidak dapat menyambungkannya satu per satu. Bahkan jika Anda menyambungkannya, biaya perawatan terlalu tinggi. Jadi pertanyaannya adalah, bagaimana cara mengubah konten template secara dinamis? ? ? Misalnya, halaman Perpustakaan Baidu yang kita lihat dalam kenyataan. . . Seperti yang ditunjukkan pada gambar di bawah ini:
Ada banyak modul di halaman ini, seperti tiga di atas saya melingkari. Pasti ada banyak HTML dalam tiga modul ini ~~~
Dua: Akuisisi Dinamis Template
Biasanya ada dua cara untuk secara dinamis mendapatkan konten HTML. Yang pertama adalah kebutuhan. Tentu saja, Anda perlu merujuk JS seperti itu. Yang kedua adalah menulis ulang templat mereka. Tentu saja, dalam artikel ini, yang perlu kita lakukan adalah menulis ulang fungsi LoadTemplate di komponen dan kemudian mengganti loaderererererererer. Bukankah itu sangat sederhana? ? ?
1. Tulis ulang metode LoadTemplate
// Langkah 1: Tulis ulang metode loadTemplate var templatefromurlloader = {loadTemplate: function (name, templateConfig, callback) {if (templateConfig.fromurl) {var fullurl = '/' + Templateconfig.fromurl/ajax) fullurled (dinamasi fullget (ajax dynamev) dynamup (ajax. {ko.components.defaultLoader.loadTemplate(name, markupString, callback);});} else {callback(null);}}};//Replace the original defaultLoader and implement the new templateFromUrlLoaderko.components.loaders.unshift(templateFromUrlLoader);2. Masukkan kode keras ke dalam file eksternal, misalnya, saya membuat file file.html baru.
3. Daftarkan komponen dan kemudian merujuk ke jalur file eksternal pada tag template, seperti yang berikut {fromUrl: 'file.html'}
ko.components.register ('pesan-editor', {viewModel: function (params) {this.text = ko.observable (params && params.initialtext || '');}, template: {fromUrl: 'file.html'},});Oke, semua fungsi sudah siap. Mari kita telusuri halaman untuk melihat seperti apa? ? ?
Akhirnya, pekerjaan besar telah selesai. Apakah benar? Kemudian dapatkah diperluas ke contoh "Perpustakaan Baidu" yang diperkenalkan di atas. Kami dapat memasukkan HTML dari setiap modul ke dalam file terpisah.
<! Doctype html> <html> <head> <meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/> <itement> </itement> <meta charset = "utf-8"/> <script src = "jQuery-1.8.js"> </script "> </skrip> <cript> <cript src =" jQuery-1.8.js "> src = "knockoutjs.js"> </script> </head> <body> <div data-bind = 'komponen: {name: "pesan-editor", params: {initialText: "Hello !!!" }} '> </div> <script type = "text/javaScript"> // Langkah 1: Tulis ulang metode loadTemplate var templateFromUrlLoader = {loadTemplate: function (name, templateConfig, callback) {if/TemplatConfig.Fromurl) {var fullUR -fulsix) {if/TemplatConfig.Fromurl) {var fullur =' +fix. Secara dinamis dapatkan konten file eksternal $ .get (fullUrl, function (markupString) {ko.components.defaultloader.loadTemplate (name, markupstring, callback);});} else {callback (null);}}; TemplateFromurlloaderko.Components.loaders.unshift (TemplateFromUrlLoader); ko.components.register ('pesan-editor', {viewModel: function (params) {this.text = ko.observable (params && params.initialText || '); },}); ko.ApplyBindings (); </script> </body> </html>Di atas adalah metode memuat file eksternal secara dinamis di KnockoutJS sebagai metode implementasi sumber data template dalam komponen. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!