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形式を示します。

シニア番号 viewModelフォームと説明
1

constructor function

コンポーネントごとに個別のviewModelオブジェクトを作成します。オブジェクトまたは関数は、コンポーネントビューでバインドするために使用されます。

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

shared object instance

viewModelオブジェクトインスタンスは共有されます。インスタンスプロパティは、オブジェクトを直接使用するために渡されます。

var sharedViewModelInstance = { ... };

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

createViewModel

ファクトリとして機能し、オブジェクトを返すことができるビューモデルとして使用できる関数を呼び出します。

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

AMD module

これは、モジュールと依存関係の両方が非同期にロードされるモジュールを定義するためのモジュール形式です。

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

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

   return MyViewModel;
});

テンプレートを述べる

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

シニア番号 テンプレートフォーム
1

element ID

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

element instance

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

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

string of markup

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

DOM nodes

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

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

document fragement

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

AMD module

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

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

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

シニア番号 ユーティリティ機能と説明
1

ko.components.register(name, configuration)

コンポーネントが登録されています。

2

ko.components.isRegistered(name)

特定のコンポーネント名がすでに登録されている場合は、trueとして返されます。それ以外の場合はfalseとして返されます。

3

ko.components.unregister(name)

コンポーネント名がレジストリから削除されます。

4

ko.components.get(name, callback)

この関数は、登録されている各ローダーに順番に移動して、コンポーネント名のviewModel / template定義を最初に渡した人を見つけます。次に、を呼び出してviewModel / template宣言を返します。callback。登録されたローダーがコンポーネントについて何も見つけられなかった場合、それは呼び出しますcallback(null)

5

ko.components.clearCachedDefinition(name)

この関数は、指定されたコンポーネントのキャッシュエントリをクリアするときに呼び出すことができます。次回コンポーネントが必要になった場合は、ローダーに再度相談します。

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

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

  • 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構成で渡されます。