KnockoutJS - Bileşenler

Bileşenler, büyük bir uygulamayı yapılandırmak ve kodun yeniden kullanılabilirliğini teşvik etmek için UI kodunu düzenlemenin büyük bir yoludur.

Diğer bileşenden miras alınır veya iç içe geçer. Yükleme ve yapılandırma için kendi kurallarını veya mantığını tanımlar.

Uygulama veya proje boyunca yeniden kullanılmak üzere paketlenmiştir. Uygulamanın tam bölümlerini veya küçük kontrolleri / widget'ları temsil eder. Talep üzerine yüklenebilir veya önceden yüklenebilir.

Bileşen Kaydı

Bileşenler, ko.components.register()API. Bileşenleri KO'da yüklemeye ve temsil etmeye yardımcı olur. Kayıt için yapılandırmalı bileşen adı bekleniyor. Yapılandırma, viewModel ve şablonun nasıl belirleneceğini belirtir.

Syntax

Bileşenler aşağıdaki şekilde kaydedilebilir -

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

• component-name herhangi bir boş olmayan dize olabilir.

• viewModel isteğe bağlıdır ve sonraki bölümlerde listelenen viewModel biçimlerinden herhangi birini alabilir.

• template gereklidir ve sonraki bölümlerde listelenen şablon biçimlerinden herhangi birini alabilir.

Bir ViewModel Belirtme

Aşağıdaki tablo, bileşenleri kaydetmek için kullanılabilecek viewModel formatlarını listeler.

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;
});

Bir Şablon Belirtme

Aşağıdaki tablo, bileşenleri kaydetmek için kullanılabilecek şablon formatlarını listeler.

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: ...
});

Tek AMD Modülü Olarak Kayıtlı Bileşenler

AMD modülü, viewModel / şablon çifti kullanmadan tek başına bir bileşeni kaydedebilir.

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

Bileşen Bağlama

Bileşen bağlamanın iki yolu vardır.

• Full syntax- Parametre ve nesneyi bileşene iletir. Aşağıdaki özellikleri kullanarak geçebilir.

  • name - Bileşen adını ekler.

  • params - Bileşen üzerindeki nesnede birden çok parametre geçirebilir.

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

• Shorthand syntax - Dizeyi bileşen adı olarak iletir ve içinde parametre içermez.

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

• Template-only components - Bileşenler, viewModel'i belirtmeden yalnızca şablonu tanımlayabilir.

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

• Using Component without a container element- Ekstra konteyner elemanı kullanılmadan bileşenler kullanılabilir. Bu, kullanılarak yapılabilircontainerless flow yorum etiketine benzer kontrol.

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

Özel Öğe

Özel öğe, bir bileşeni oluşturmanın bir yoludur. Burada, bileşenlerin bağlandığı bir yer tutucu tanımlamak yerine, doğrudan kendi kendine tanımlayıcı bir işaretleme öğesi adı yazabilirsiniz.

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

Geçen Parametre

paramsözniteliği, parametreyi bileşen viewModel'e iletmek için kullanılır. Veri bağlama özniteliğine benzer. Params özniteliğinin içeriği bir JavaScript nesnesi değişmezi gibi yorumlanır (tıpkı bir data-bind özniteliği gibi), böylece herhangi bir türden rastgele değerler iletebilirsiniz. Parametreyi aşağıdaki şekillerde geçirebilir -

• Communication between parent and child components- Bileşen kendi başına somutlaştırılmaz, bu nedenle görünüm modeli özellikleri bileşenin dışından referans alınır ve bu nedenle alt bileşen görünüm modeli tarafından alınır. Örneğin, aşağıdaki sözdiziminde şunu görebilirsiniz:ModelValue child viewModel yapıcısı tarafından alınan üst görünüm modelidir ModelProperty.

• Passing observable expressions - Params parametresinde üç değeri vardır.

  • simpleExpression- Sayısal bir değerdir. Herhangi bir gözlemlenebilir madde içermez.

  • simpleObservable- Üst viewModel'de tanımlanan bir örnektir. Parent viewModel, alt viewModel tarafından gözlemlenebilir üzerinde yapılan değişiklikleri otomatik olarak alacaktır.

  • observableExpression- İfade kendi başına değerlendirildiğinde, ifade gözlemlenebilir olanı okur. Gözlenebilir değer değiştiğinde, ifadenin sonucu da zamanla değişebilir.

Parametreleri şu şekilde geçirebiliriz -

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

ViewModel'deki parametreleri aşağıdaki gibi geçirebiliriz -

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

İşaretlemeyi Bileşenlere Aktarma

Alınan işaret, bir bileşen oluşturmak için kullanılır ve çıktının bir parçası olarak seçilir. Aşağıdaki düğümler, bileşen şablonundaki çıktının bir parçası olarak aktarılır.

template: { nodes: $componentTemplateNodes }

Özel öğe etiketi adlarını kontrol etme

Kullanarak bileşenlere kaydettiğiniz isimler ko.components.registeraynı ad, özel öğe etiket adlarına karşılık gelir. Özel öğe etiket adlarını, kontrol etmek için geçersiz kılarak değiştirebiliriz.getComponentNameForNode.

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

Özel Öğeleri Kaydetme

Varsayılan bileşen yükleyici kullanılıyorsa ve dolayısıyla bileşen, kullanılarak kaydedilirse, özel öğeler hemen kullanılabilir hale getirilebilir. ko.components.register. Kullanmıyorsakko.components.registerve özel bileşen yükleyici uygulandığında, özel öğe, seçilen herhangi bir öğe adı tanımlanarak kullanılabilir. Kullanırken konfigürasyonu belirtmenize gerek yokturko.components.register özel bileşen yükleyici artık kullanmadığından.

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

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

• Yukarıdaki kodu şuraya kaydedin: component_register.htm dosya.

• Bu HTML dosyasını bir tarayıcıda açın.

Bileşen Yükleyiciler

Bileşen yükleyiciler, verilen bileşen adı için şablon / viewModel çiftini eşzamansız olarak geçirmek için kullanılır.

Varsayılan bileşen yükleyici

Varsayılan bileşen yükleyici, açıkça kaydedilmiş konfigürasyona bağlıdır. Bileşen kullanılmadan önce her bileşen kaydedilir.

ko.components.defaultLoader

Bileşen Yükleyici Yardımcı Program İşlevleri

Varsayılan bileşen yükleyici, aşağıdaki işlevleri kullanarak okuyabilir ve yazabilir.

Özel bir bileşen yükleyici uygulama

Özel bileşen yükleyici aşağıdaki şekillerde uygulanabilir -

• getConfig(name, callback)- İsimlere bağlı olarak konfigürasyonları programlı olarak geçebiliriz. Konfigürasyonları geçmek için geri çağırmayı (componentConfig) çağırabiliriz, burada object componentConfig, loadComponent veya başka bir yükleyici tarafından kullanılabilir.

• loadComponent(name, componentConfig, callback)- Bu işlev, yapılandırılma şekline bağlı olarak viewModel'i ve config'in şablon bölümünü çözer. Viewmodel / şablon çiftini geçmek için geri çağırmayı (sonuç) çağırabiliriz, burada nesne sonucu aşağıdaki özellikler tarafından tanımlanır.

  • template- Gerekli. DOM düğümlerinin dizisini döndür.

  • createViewModel(params, componentInfo)- İsteğe bağlı. ViewModel özelliğinin nasıl yapılandırıldığına bağlı olarak viewModel Nesnesini döndürür.

• loadTemplate(name, templateConfig, callback)- DOM düğümleri, özel mantık kullanılarak bir şablonda geçirilir. TemplateConfig nesnesi, bir componentConfig nesnesine ait şablonun bir özelliğidir. callback (domNodeArray), bir DOM düğümleri dizisini iletmek için çağrılır.

• loadViewModel(name, templateConfig, callback) - viewModel fabrikası, özel mantık kullanılarak bir viewModel yapılandırmasında geçirilir.