Knockoutjs-components

提供：Dev Guides
移動先:案内、検索

KnockoutJS-コンポーネント

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

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

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

コンポーネント登録

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

構文

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

ko.components.register('component-name', {
   viewModel: {...},   //function code
   template: {....)//function code
});
  • component-name には、空でない任意の文字列を指定できます。
  • viewModel はオプションであり、次のセクションにリストされているviewModel形式を使用できます。
  • template は必須であり、次のセクションにリストされているテンプレート形式を使用できます。

ViewModelの記述

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

Sr.No. viewModel Forms & Description
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;
});

テンプレートの記述

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

Sr.No. Template Forms
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つの方法があります。

  • 完全な構文-パラメータとオブジェクトをコンポーネントに渡します。 次のプロパティを使用して渡すことができます。
  • name -コンポーネント名を追加します。
  • params -コンポーネントのオブジェクトに複数のパラメーターを渡すことができます。
<div data-bind='component: {
   name: "tutorials point",
   params: { mode: "detailed-list", items: productsList }
}'>
</div>
  • 短縮構文-文字列をコンポーネント名として渡しますが、パラメータは含まれません。
<div data-bind = 'component: "component name"'></div>
  • テンプレートのみのコンポーネント-コンポーネントは、viewModelを指定せずにテンプレートのみを定義できます。
ko.components.register('component name', {
   template:'<input data-bind = "value: someName"/>,
});
  • コンテナ要素なしでコンポーネントを使用する-追加のコンテナ要素を使用せずにコンポーネントを使用できます。 これは、コメントタグと同様の*コンテナレスフロー*コントロールを使用して実行できます。
<!--ko.component: ""-->
<!--/ko-->

カスタム要素

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

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

パラメータを渡す

*params* 属性は、パラメーターをコンポーネントviewModelに渡すために使用されます。 data-bind属性に似ています。 params属性の内容は、JavaScriptオブジェクトリテラルのように（データバインド属性のように）解釈されるため、任意のタイプの任意の値を渡すことができます。 それは次の方法でパラメータを渡すことができます-
  • 親コンポーネントと子コンポーネント間の通信-コンポーネントはそれ自体ではインスタンス化されないため、viewmodelプロパティはコンポーネントの外部から参照されるため、子コンポーネントのviewmodelによって受信されます。 たとえば、次の構文では、 ModelValue が親viewmodelであり、子viewModelコンストラクター ModelProperty によって受信されることがわかります。
  • 観測可能な式を渡す-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', { ......... });

例 

<!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>

出力

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

  • 上記のコードを component_register ファイルに保存します。 *このHTMLファイルをブラウザーで開きます。

コンポーネントローダー

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

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

デフォルトのコンポーネントローダーは、明示的に登録された構成に依存します。 各コンポーネントは、コンポーネントを使用する前に登録されます。 

ko.components.defaultLoader

コンポーネントローダーユーティリティ関数

デフォルトのコンポーネントローダーは、次の関数を使用して読み書きできます。

Sr.No. Utility functions & Description
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定義を最初に渡した人を見つけます。 次に、 callback を呼び出してviewModel/template宣言を返します。 登録されたローダーがコンポーネントに関する情報を見つけられなかった場合、* callback（null）*を呼び出します。

5

ko.components.clearCachedDefinition(name)

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

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

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

  • * getConfig（name、callback）*-名前に応じて、プログラムで構成を渡すことができます。 callback（componentConfig）を呼び出して構成を渡すことができます。ここで、loadComponentまたはその他のローダーがコンポーネントcomponentConfigを使用できます。
  • * loadComponent（name、componentConfig、callback）*-この関数は、設定方法に応じて、configのviewModelとテンプレート部分を解決します。 callback（result）を呼び出して、viewmodel/templateのペアを渡すことができます。オブジェクトの結果は、次のプロパティによって定義されます。
  • テンプレート-必須。 DOMノードの配列を返します。
  • * createViewModel（params、componentInfo）*-オプション。 viewModelプロパティの設定方法に応じて、viewModelオブジェクトを返します。
  • * loadTemplate（name、templateConfig、callback）*-DOMノードは、カスタムロジックを使用してテンプレートに渡されます。 オブジェクトtemplateConfigは、オブジェクトcomponentConfigのテンプレートのプロパティです。 callback（domNodeArray）は、DOMノードの配列を渡すために呼び出されます。
  • * loadViewModel（name、templateConfig、callback）*-viewModelファクトリは、カスタムロジックを使用してviewModel構成で渡されます。
「https://www.finddevguides.com/index.php?title=Knockoutjs-components&oldid=33170」から取得
Powered by MediaWiki