KnockoutJS - Komponen

Komponen adalah cara terbaik untuk mengatur kode UI untuk menyusun aplikasi besar dan mendorong penggunaan ulang kode.

Itu diwarisi atau disarangkan dari komponen lain. Untuk pemuatan dan konfigurasi, ia mendefinisikan konvensi atau logikanya sendiri.

Itu dikemas untuk digunakan kembali di seluruh aplikasi atau proyek. Mewakili bagian aplikasi lengkap atau kontrol / widget kecil. Ini dapat dimuat atau dimuat sebelumnya sesuai permintaan.

Registrasi Komponen

Komponen dapat mendaftar menggunakan ko.components.register()API. Ini membantu untuk memuat dan mewakili komponen dalam KO. Nama komponen dengan konfigurasi diharapkan untuk pendaftaran. Konfigurasi menentukan cara menentukan viewModel dan template.

Syntax

Komponen dapat didaftarkan sebagai berikut -

ko.components.register('component-name', {
   viewModel: {...},    //function code
   template: {....)	//function code
});

• Itu component-name bisa berupa string tidak kosong.

• viewModel bersifat opsional, dan dapat menggunakan format viewModel apa pun yang tercantum di bagian berikutnya.

• template diperlukan, dan dapat menggunakan salah satu format template yang tercantum di bagian selanjutnya.

Menyatakan ViewModel

Tabel berikut mencantumkan format viewModel yang dapat digunakan untuk mendaftarkan komponen.

function SomeComponentViewModel(params) {
   this.someProperty = params.something;
}
ko.components.register('component name', {
   viewModel: SomeComponentViewModel,
   template: ...
});

var sharedViewModelInstance = { ... };

ko.components.register('component name', {
   viewModel: { instance: sharedViewModelInstance },
   template: ...
});

ko.components.register('component name', {  
   viewModel: {  
      createViewModel: function (params, componentInfo) {  
         ...       //function code  
         ...
      }  
   },  
   template: ....  
});

ko.components.register('component name', {
   viewModel: { require: 'some/module/name' },
   template: ...
});

define(['knockout'], function(ko) {
   function MyViewModel() {
      // ...
   }

   return MyViewModel;
});

Menyatakan Template

Tabel berikut mencantumkan format template yang dapat digunakan untuk mendaftarkan komponen.

ko.components.register('component name', {
   template: { element: 'component-template' },
   viewModel: ...
});

var elemInstance = document.getElementById('component-template');

ko.components.register('component name', {
   template: { element: elemInstance },
   viewModel: ...
});

ko.components.register('component name', {
   template: '<input data-bind = "value: yourName" />\
      <button data-bind = "click: addEmp">Add Emp </button>',
   viewModel: ...
});

var emp = [
   document.getElementById('node 1'),
   document.getElementById('node 2'),
];

ko.components.register('component name', {
   template: emp,
   viewModel: ...
});

ko.components.register('component name', {
   template: someDocumentFragmentInstance,
   viewModel: ...
});

ko.components.register('component name', {
   template: { require: 'some/template' },
   viewModel: ...
});

Komponen Terdaftar sebagai Modul AMD Tunggal

Modul AMD dapat mendaftarkan komponen dengan sendirinya tanpa menggunakan viewModel / template pair.

ko.components.register('component name',{ require: 'some/module'});

Pengikatan Komponen

Ada dua cara pengikatan komponen.

• Full syntax- Melewati parameter dan objek ke komponen. Itu bisa lewat menggunakan properti berikut.

  • name - Ini menambahkan nama komponen.

  • params - Dapat melewatkan beberapa parameter dalam objek pada komponen.

<div data-bind='component: {
   name: "tutorials point",
   params: { mode: "detailed-list", items: productsList }
}'>
</div>

• Shorthand syntax - Ini melewati string sebagai nama komponen dan tidak menyertakan parameter di dalamnya.

<div data-bind = 'component: "component name"'></div>

• Template-only components - Komponen hanya dapat mendefinisikan template tanpa menentukan viewModel.

ko.components.register('component name', {
   template:'<input data-bind = "value: someName" />,
});

• Using Component without a container element- Komponen dapat digunakan tanpa menggunakan elemen kontainer tambahan. Ini bisa dilakukan dengan menggunakancontainerless flow kontrol yang mirip dengan tag komentar.

<!--ko.component: ""-->
<!--/ko-->

Elemen Kustom

Elemen khusus adalah cara untuk merender komponen. Di sini, Anda dapat langsung menulis nama elemen markup yang mendeskripsikan diri alih-alih menentukan placeholder, tempat komponen terikat melaluinya.

<products-list params = "name: userName, type: userType"></products-list>

Meneruskan Parameter

paramsatribut digunakan untuk meneruskan parameter ke komponen viewModel. Ini mirip dengan atribut data-bind. Konten atribut params diinterpretasikan seperti literal objek JavaScript (seperti atribut data-bind), jadi Anda bisa meneruskan nilai sembarang jenis apa pun. Itu dapat melewati parameter dengan cara berikut -

• Communication between parent and child components- Komponen tidak dibuat dengan sendirinya sehingga properti viewmodel dirujuk dari luar komponen dan dengan demikian akan diterima oleh viewmodel komponen turunan. Misalnya, Anda dapat melihat di sintaks berikut ituModelValue adalah tampilan model induk, yang diterima oleh konstruktor viewModel anak ModelProperty.

• Passing observable expressions - Ini memiliki tiga nilai dalam parameter params.

  • simpleExpression- Ini adalah nilai numerik. Ini tidak melibatkan observasi apa pun.

  • simpleObservable- Ini adalah instance yang didefinisikan pada viewModel induk. ViewModel induk secara otomatis akan mendapatkan perubahan pada observable yang dilakukan oleh viewModel anak.

  • observableExpression- Ekspresi membaca yang dapat diamati saat ekspresi dievaluasi dengan sendirinya. Saat nilai observasi berubah, hasil ekspresi juga bisa berubah seiring waktu.

Kami dapat mengirimkan parameter sebagai berikut -

<some-component
   params = 'simpleExpression: 1 + 1,
      simpleObservable: myObservable,
      observableExpression: myObservable() + 1'>
</some-component>

Kita bisa melewatkan parameter di viewModel sebagai berikut -

<some-component
   params = 'objectValue:{a: 3, b: 2},
      dateValue: new date(),
      stringValue: "Hi",
      numericValue:123,
      boolValue: true/false,
      ModelProperty: ModelValue'>
</some-component>

Meneruskan Markup ke Komponen

Markup yang diterima digunakan untuk membuat komponen dan dipilih sebagai bagian dari output. Node berikut diteruskan sebagai bagian dari output di template komponen.

template: { nodes: $componentTemplateNodes }

Mengontrol nama tag elemen khusus

Nama-nama yang Anda daftarkan di komponen menggunakan ko.components.register, nama yang sama terkait dengan nama tag elemen khusus. Kita bisa mengubah nama tag elemen kustom dengan menimpanya ke kontrol menggunakangetComponentNameForNode.

ko.components.getComponentNameForNode = function(node) {
   ...
   ...   //function code
   ...
}

Mendaftarkan Elemen Kustom

Elemen khusus dapat segera disediakan, jika pemuat komponen default digunakan dan karenanya komponen didaftarkan menggunakan ko.components.register. Jika kami tidak menggunakanko.components.registerdan mengimplementasikan pemuat komponen khusus, maka elemen khusus dapat digunakan dengan menentukan nama elemen pilihan apa pun. Tidak perlu menentukan konfigurasi saat Anda menggunakanko.components.register karena pemuat komponen khusus tidak menggunakannya lagi.

ko.components.register('custom-element', { ......... });

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Components</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
   </head>
   
   <body>
      <!--params attribute is used to pass the parameter to component viewModel.-->
      <click params = "a: a, b: b"></click>

      <!--template is used for a component by specifying its ID -->
      <template id = "click-l">
         <div data-bind = "text: a"></div>

         <!--Use data-bind attribute to bind click:function() to ViewModel. -->
         <button data-bind = "click:function(){callback(1)}">Increase</button>
         <button data-bind = "click:function(){callback(-1)}">Decrease</button>
      </template>

      <script>
         //Here components are registered
         ko.components.register('click', {
            
            viewModel: function(params) {
               self = this;
               this.a = params.a;
               this.b = params.b;

               this.callback = function(num) {
                  self.b(parseInt(num));
                  self.a( self.a() + parseInt(num) );
               };
            },
            template: { element: 'click-l' }
         });

         //keeps an eye on variable for any modification in data
         function viewModel() {
            this.a = ko.observable(2);
            this.b = ko.observable(0);
         }

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

Output

Mari kita lakukan langkah-langkah berikut untuk melihat cara kerja kode di atas -

• Simpan kode di atas component_register.htm mengajukan.

• Buka file HTML ini di browser.

Pemuat Komponen

Pemuat komponen digunakan untuk meneruskan pasangan template / viewModel secara asinkron untuk nama komponen yang diberikan.

Pemuat komponen default

Pemuat komponen default bergantung pada konfigurasi yang terdaftar secara eksplisit. Setiap komponen didaftarkan sebelum menggunakan komponen.

ko.components.defaultLoader

Fungsi Utilitas Pemuat Komponen

Pemuat komponen default dapat membaca dan menulis menggunakan fungsi berikut.

Menerapkan pemuat komponen khusus

Pemuat komponen khusus dapat diimplementasikan dengan cara berikut -

• getConfig(name, callback)- Bergantung pada namanya, kita dapat meneruskan konfigurasi secara terprogram. Kita dapat memanggil callback (componentConfig) untuk meneruskan konfigurasi, di mana objek componentConfig dapat digunakan oleh loadComponent atau pemuat lainnya.

• loadComponent(name, componentConfig, callback)- Fungsi ini menyelesaikan viewModel dan bagian template dari konfigurasi tergantung pada cara konfigurasinya. Kita bisa memanggil callback (result) untuk melewatkan pasangan viewmodel / template, di mana hasil objek ditentukan oleh properti berikut.

  • template- Wajib. Kembalikan larik node DOM.

  • createViewModel(params, componentInfo)- Opsional. Mengembalikan Objek viewModel bergantung pada bagaimana properti viewModel dikonfigurasi.

• loadTemplate(name, templateConfig, callback)- Node DOM diteruskan dalam template menggunakan logika khusus. Objek templateConfig adalah properti template dari objek componentConfig. callback (domNodeArray) dipanggil untuk meneruskan larik simpul DOM.

• loadViewModel(name, templateConfig, callback) - Pabrik viewModel diteruskan dalam konfigurasi viewModel menggunakan logika kustom.