KnockoutJS-コンポーネント

コンポーネントは、大規模なアプリケーションを構築し、コードの再利用性を促進するためのUIコードを整理するための巨大な方法です。

他のコンポーネントから継承またはネストされます。ロードと構成については、独自の規則またはロジックを定義します。

アプリケーションまたはプロジェクト全体で再利用できるようにパッケージ化されています。アプリケーションまたは小さなコントロール/ウィジェットの完全なセクションを表します。必要に応じてロードまたはプリロードできます。

コンポーネント登録

コンポーネントは、を使用して登録できます ko.components.register()API。KOでコンポーネントをロードして表すのに役立ちます。登録には、構成を含むコンポーネント名が必要です。構成は、viewModelとテンプレートを決定する方法を指定します。

Syntax

コンポーネントは次のように登録できます-

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

• ザ・ component-name 空でない任意の文字列にすることができます。

• viewModel オプションであり、次のセクションにリストされている任意のviewModel形式を使用できます。

• template が必要であり、次のセクションにリストされているテンプレート形式のいずれかを取ることができます。

ViewModelの記述

次の表に、コンポーネントの登録に使用できるviewModel形式を示します。

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

テンプレートを述べる

次の表に、コンポーネントの登録に使用できるテンプレート形式を示します。

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

単一のAMDモジュールとして登録されたコンポーネント

AMDモジュールは、viewModel / templateペアを使用せずに、コンポーネントを単独で登録できます。

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

コンポーネントのバインド

コンポーネントのバインドには2つの方法があります。

• Full syntax−パラメータとオブジェクトをコンポーネントに渡します。以下のプロパティを使用して合格できます。

  • name −コンポーネント名を追加します。

  • params −コンポーネントのオブジェクトに複数のパラメータを渡すことができます。

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

• Shorthand syntax −文字列をコンポーネント名として渡し、パラメータは含まれません。

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

• Template-only components −コンポーネントは、viewModelを指定せずにテンプレートを定義することしかできません。

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

• Using Component without a container element−コンポーネントは、追加のコンテナ要素を使用せずに使用できます。これは、containerless flow コメントタグと同様のコントロール。

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

カスタム要素

カスタム要素は、コンポーネントをレンダリングする方法です。ここでは、コンポーネントがバインドされるプレースホルダーを定義する代わりに、自己記述的なマークアップ要素名を直接記述することができます。

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

パラメータの受け渡し

params属性は、パラメーターをコンポーネントviewModelに渡すために使用されます。これは、データバインド属性に似ています。params属性の内容は、JavaScriptオブジェクトリテラルのように（データバインド属性のように）解釈されるため、任意のタイプの任意の値を渡すことができます。次の方法でパラメータを渡すことができます-

• Communication between parent and child components−コンポーネントはそれ自体ではインスタンス化されないため、viewmodelプロパティはコンポーネントの外部から参照され、子コンポーネントのviewmodelによって受信されます。たとえば、次の構文で次のことがわかります。ModelValue 子viewModelコンストラクターによって受信される親viewmodelです ModelProperty。

• Passing observable expressions −paramsパラメーターに3つの値があります。

  • simpleExpression−数値です。オブザーバブルは含まれていません。

  • simpleObservable−親viewModelで定義されているインスタンスです。親viewModelは、子viewModelによって行われたobservableの変更を自動的に取得します。

  • observableExpression−式は、式がそれ自体で評価されるときにオブザーバブルを読み取ります。観測可能な値が変化すると、式の結果も時間とともに変化する可能性があります。

次のようにパラメータを渡すことができます-

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

次のようにviewModelのパラメーターを渡すことができます-

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

コンポーネントへのマークアップの受け渡し

受信したマークアップはコンポーネントの作成に使用され、出力の一部として選択されます。次のノードは、コンポーネントテンプレートの出力の一部として渡されます。

template: { nodes: $componentTemplateNodes }

カスタム要素タグ名の制御

を使用してコンポーネントに登録する名前 ko.components.register、同じ名前がカスタム要素タグ名に対応します。カスタム要素タグ名をオーバーライドして、を使用して制御することで変更できますgetComponentNameForNode。

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

カスタム要素の登録

デフォルトのコンポーネントローダーが使用されているため、コンポーネントがを使用して登録されている場合、カスタム要素をすぐに使用できるようになります。 ko.components.register。使用していない場合ko.components.registerカスタムコンポーネントローダーを実装すると、任意の要素名を定義してカスタム要素を使用できます。使用時に設定を指定する必要はありませんko.components.register カスタムコンポーネントローダーはそれを使用しなくなったためです。

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

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

• 上記のコードをに保存します component_register.htm ファイル。

• このHTMLファイルをブラウザで開きます。

コンポーネントローダー

コンポーネントローダーは、指定されたコンポーネント名のテンプレート/ viewModelペアを非同期的に渡すために使用されます。

デフォルトのコンポーネントローダー

デフォルトのコンポーネントローダーは、明示的に登録された構成によって異なります。各コンポーネントは、コンポーネントを使用する前に登録されます。

ko.components.defaultLoader

コンポーネントローダーユーティリティの機能

デフォルトのコンポーネントローダーは、次の関数を使用して読み取りと書き込みを行うことができます。

カスタムコンポーネントローダーの実装

カスタムコンポーネントローダーは、次の方法で実装できます。

• getConfig(name, callback)−名前に応じて、プログラムで構成を渡すことができます。callback（componentConfig）を呼び出して構成を渡すことができます。この場合、オブジェクトcomponentConfigはloadComponentまたはその他のローダーで使用できます。

• loadComponent(name, componentConfig, callback)−この関数は、構成方法に応じて、構成のviewModelとテンプレート部分を解決します。callback（result）を呼び出して、ビューモデルとテンプレートのペアを渡すことができます。オブジェクトの結果は、次のプロパティによって定義されます。

  • template−必須。DOMノードの配列を返します。

  • createViewModel(params, componentInfo)−オプション。viewModelプロパティの構成方法に応じて、viewModelオブジェクトを返します。

• loadTemplate(name, templateConfig, callback)− DOMノードは、カスタムロジックを使用してテンプレートで渡されます。オブジェクトtemplateConfigは、オブジェクトcomponentConfigのテンプレートのプロパティです。callback（domNodeArray）は、DOMノードの配列を渡すために呼び出されます。

• loadViewModel(name, templateConfig, callback) − viewModelファクトリは、カスタムロジックを使用してviewModel構成で渡されます。