Nockoutjsへの初心者ガイド：パート3

キーテイクアウト

• knockoutjsの「foreach」バインディングを使用して、アレイ内の各アイテムのマークアップのセクションを自動的に複製および結合します。たとえば、アレイデータに基づいてテーブルの行を動的に生成したり、項目をリストしたりします。 「$ data」、 `$ parent`、` $ parents `、および` $ root`のような擬似容量を活用して、ビューモデル階層のさまざまなレベルからデータにアクセスして操作して、効果的にアクセスして操作します。
「if」と `with` bindingsを実装して、UIの条件付きセクションをレンダリングし、新しいバインディングコンテキストを確立し、アプリケーションのダイナミズムと読みやすさを向上させます。
• ノックアウトJSのテンプレート機能を探索します。これは、コントロールフローバインディングと、追加のパラメーターとコールバックを渡すオプションを使用した「テンプレート」を使用して、コントロールフローバインディングと高度なシナリオを使用したネイティブテンプレートの両方を可能にします。
ノックアウト観測可能性を拡張し、複雑な動作と相互作用をカプセル化するカスタムバインディングを作成し、清潔で管理可能なコードベースを維持する再利用可能なソリューションを提供します。
knockoutjsの初心者ガイド：テンプレートとその他
4つのコントロールフローバインディングがあります。これらの制御バインディングを使用すると、以下に示すように、名前付きテンプレートを作成せずにコントロールフローロジックを宣言的に定義できます。
• foreachバインディングは、配列内の各エントリのマークアップのセクションを複製し、そのマークアップの各コピーを対応する配列アイテムにバインドします。これは、リストまたはテーブルのレンダリングに適しています。配列が観測可能な配列である場合、後で配列エントリを追加または削除するたびに、バインディングは、他のDOM要素に影響を与えることなく、リストアイテムまたはテーブル行のコピーを挿入または削除することにより、UIを更新します。次の例を参照してください：

ここでは、ブックアレイの配列エントリごとにテーブル行が自動的に作成されます。

時には、そのプロパティの1つだけでなく、配列エントリ自体を参照する必要がある場合があります。その場合、擬似された$データを使用できます。これは、「現在のアイテム」を意味します。

これは、各アイテムのコードを個別に繰り返す必要なく、1週間中ずっとリストします。

ノックアウトでは、希望するだけ多くのコントロールフローバインディングをネストできます。そして、それを行う場合、階層にバックアップし、親のコンテキストからデータまたは機能にアクセスすることが望ましいことがよくあります。そのような場合、次の擬似液液を使用できます

$親 - 現在のforeachブロックの外側のデータ項目を表します

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

$親 - すべての外側のコントロールフロースコープのデータ項目を表す配列です。 $親[0]は$親と同じです。 $親[1]は、祖父母のコントロールフロースコープのアイテムを表しています。

$ root - 最も外側のコントロールフロースコープのアイテムを表します。通常、これはあなたのトップレベルビューモデルオブジェクトです

次の例では、本のアレイから本のアイテムを適切に削除するために、$ parent persudovariableを使用します。

場合によっては、マークアップのセクションを複製することをお勧めしますが、Foreachバインディングを入力するコンテナ要素はありません。次に、次の構文を使用できます

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

この例では、通常のforeachバインディングを使用することはできません。

に置くと、ヘッダーアイテムが複製され、
内部にさらにコンテナを入れたい場合は、
• 要素のみが
  sを許可されているためです。解決策は、 and コメントが内部のマークアップを含む「仮想要素」を定義するコンテナレスコントロールフロー構文を使用することです。この仮想要素は、実際のコンテナ要素があるかのように。このタイプの構文は、Bindingsでも有効です。

  バインディングにより、指定された式がtrueに評価される場合にのみ、マークアップのセクションがドキュメントに表示されます。その後、含まれるマークアップがドキュメントに存在し、その上のデータバインド属性が適用されます。一方、式がfalseに評価された場合、最初にバインディングを適用せずに、含まれるマークアップがドキュメントから削除されます。

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  バインディングを使用すると、新しいバインディングコンテキストが作成されるため、子孫要素は指定されたオブジェクトのコンテキストでバインドされます。子孫要素を結合するためのコンテキストとして使用したいオブジェクト。あなたが提供する式がnullまたは未定義に評価される場合、子孫の要素はまったく拘束されませんが、代わりにドキュメントから削除されます。バインディングを使用すると、データコンテキストが指定したオブジェクトに変更されます。これは、複数の親と子の関係を持つオブジェクトグラフを扱うときに特に役立ちます。
  テンプレート
  テンプレートバインディングは、関連するDOM要素にテンプレートのレンダリング結果に浸透します。テンプレートは、ビューモデルデータの関数として、繰り返しブロックまたはネストされたブロックを使用して、洗練されたUI構造を構築するためのシンプルで便利な方法です。テンプレートを使用する主な方法は2つあります。最初のものであるネイティブのテンプレートは、もし、その他、その他のコントロールフローバインディングに到達するメカニズムです。内部的には、これらのコントロールフローバインディングは、要素に含まれるHTMLマークアップをキャプチャし、任意のデータ項目に対してレンダリングするテンプレートとして使用します。この機能はノックアウトに組み込まれており、外部ライブラリは必要ありません。ここでテンプレートを作成するための基本的なスキームを見ることができます：

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  次の例では、動作中に使用する方法を確認できます。

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  ここでは、テンプレートをマークアップの残りの部分にバインドするために、テンプレート名に等しいIDを使用する必要があります。この場合、それは「ブックテンプレート」です

  上記の短い構文を使用する代わりに、より多くのパラメーターをテンプレートバインディングに渡すことができます。これにより、最終出力をより正確に制御できます。
  ここで、名前はレンダリングするテンプレートを含む要素のIDです。データは、レンダリングするテンプレートのデータとして提供するオブジェクトです。そして、アフターレンダーは、レンダリングされたDOM要素に対して呼び出されるコールバック関数です。 次の例は、foreachバインディングに相当します。ここで、foreachはテンプレートバインディングのパラメーターとして渡されます。

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  匿名のテンプレートを要素に直接埋め込むことで、まったく同じ結果を得ることができます。

  テンプレートを使用する2番目の方法は、ノックアウトをサードパーティテンプレートエンジンに接続することです。ノックアウトは、モデル値を外部テンプレートエンジンに渡し、結果のマークアップ文字列をドキュメントに挿入します。

  jquery.tmpl

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  および

  アンダースコア

  テンプレートエンジンを使用する例については、ドキュメントを確認してください。

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  拡張オブザーバブル

  ノックアウトオブザーバブルは、読み取り値をサポートし、その値が変更されたときに加入者に通知するために必要な基本的な機能を提供します。ただし、場合によっては、観察可能なプロパティを追加するなど、観察可能な機能に追加の機能を追加することをお勧めします。ノックアウトエクステンダーは、まさにそれを行うための簡単で柔軟な方法を提供します。 エクステンダーの作成には、KO.Extendersオブジェクトに関数を追加することが含まれます。この関数は、最初の引数と2番目の引数のすべてのオプションとして、観察可能な自体を取り入れます。その後、観察可能なものを返したり、何らかの方法でオリジナルを使用したりする計算された観察可能なもののような新しいものを返すことができます。 ここで、ヒントメッセージを表示する機能を追加する観察可能なエクステンダーを作成します。

  カスタムバインディング
  ノックアウトの内蔵バインディングを使用すると、ほとんどのバインディングシナリオを処理できますが、カバーされていない特殊なバインディングシナリオに遭遇した場合、ノックアウトでカスタムバインディングを作成できます。繰り返しやすい方法。たとえば、カスタムバインディングの形で、グリッド、タブセットなどのインタラクティブコンポーネントを作成できます。

  ノックアウトバインディングは、initとupdateの2つの方法で構成されています。バインディングを作成することは、これら2つのメソッドを使用してオブジェクトを作成し、以下に示すようにko.bindinghandlersを使用してノックアウトでそのオブジェクトを登録するのと同じくらい簡単です。

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  init関数は、この要素のバインディングが初めて評価されるときにのみ実行されます。これは通常、1回限りの初期化コードを実行したり、UIでトリガーされているイベントに基づいてビューモデルを更新できるイベントハンドラーを配線するために使用されます。

  更新関数は、関連する観測可能性が変更されたときに応答する方法を提供します。通常、これはビューモデルの変更に基づいてUIを更新するために使用されます。

  initおよびupdate関数には4つのパラメーターが提供されます。一般的に、ビューモデルをUIにリンクする標準的な方法であるため、要素とValueccessorパラメーターに焦点を当てる必要があります。実際には、INITと更新のコールバックの両方を提供する必要はありません。必要なのはそれだけであれば、どちらかを提供できます。

  要素パラメーターは、バインディングを含むDOM要素に直接アクセスできます。

  ValueCcessorパラメーターは、バインディングに渡されたものへのアクセスを提供する関数です。あなたが観察可能なものに合格した場合、この関数の結果はその観察可能です（それの値ではありません）。バインディングで式を使用した場合、ValueAccescerの結果は式の結果になります。

  Allbindingsaccesserパラメーターは、同じデータバインド属性にリストされている他のすべてのバインディングにアクセスできます。これは通常、この結合と相互作用する他のバインディングにアクセスするために使用されます。これらのバインディングは、おそらくそれらに関連付けられたコードを持たない可能性が高く、複数のプロパティを持つオブジェクトをメインバインディングに渡すことを選択しない限り、追加のオプションをバインディングに渡す方法にすぎません。たとえば、OptionsValue、OptionStext、およびOptionScaptionは、オプションバインディングにオプションを渡すためにのみ使用されるバインディングです。

  ViewModelパラメーターは、テンプレート外のバインディングの全体的なビューモデルへのアクセスを提供します。テンプレート内では、これはテンプレートにバインドされているデータに設定されます。たとえば、テンプレートバインディングのFOREACHオプションを使用する場合、ViewModelパラメーターは、テンプレートを介して送信されている現在の配列メンバーに設定されます。ほとんどの場合、ValueCcessorはあなたが望むデータを提供しますが、ViewModelパラメーターは、関数を呼び出す/適用するときにターゲットになるためにオブジェクトを必要とする場合に特に役立ちます。

  次の例では、焦点を合わせているときにテキストアレアをスケーリングするカスタムバインディングを作成します。

  最初に、init関数では、要素が焦点を合わせている場合、その値は真に設定され、その逆も同様であると宣言します。次に、更新関数でAllBindingAccessorパラメーターを使用して、バインディングに追加のオプションを追加します - スケーラップとスケーリングダウン。 ko.utils.unwrapobservservableを使用して、現在のバインディングの値を取得し、Trueに設定されているかどうかを確認します。もしそうなら、DOM要素が拡大され、それ以外の場合はスケーリングされます。

  最後に、観察可能なエクステンダーとスケーリングフォーカスのカスタムバインディングを組み合わせた例を見てみましょう：

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  別のファイルに観察可能なヒントとスケーリングフォーカスバインディングを配置し、メインファイルにそれらを含めることができます。これにより、コードがモジュラーになり、いつでも必要なときに再使用できます。

  それだけです、皆さん！このシリーズを楽しんだことを願っています。これで、ノックアウトの学習と実験を開始および継続するために必要なすべての知識があります。より包括的な例とチュートリアルについては、ノックアウトサイトに行くことができます。

  knockoutjs

  に関するよくある質問

  ko.utils.unwrapobservserable in boknoutjs？

  ko.utils.unwrapobservseruble knokoutjsのko.utils.unwrapobservserfunceは、観察可能または非容疑者の現在の値を取得するために使用されます。この関数は、観察可能なものを扱っているのか、それとも観察できないのかがわからない場合に特に役立ちます。これにより、それぞれに個別のコードを記述することなく、両方のケースを処理できます。この関数は、観測可能性の作業を容易にするための追加の機能を提供するKnockoutJSのユーティリティ関数の一部です。 HTMLのセクションへのアイテムの配列。アレイ内の各アイテムの関連するDOM要素とその子孫を複製し、ループを作成します。これは、UIにアイテムのリストを表示する場合に特に便利です。 foreachバインディングは、各反復のコンテキストも提供し、$ dataキーワードを使用して現在のアイテムにアクセスできるようにします。 JSONオブジェクトを観測可能なオブジェクトに変換するのに役立つユーティリティ。これは、サーバーのデータを使用している場合に特に便利です。マッピングプラグインを使用すると、データをビューモデルに簡単にマッピングできます。また、マッピングプロセスをカスタマイズするオプションも提供します。 nockoutjsでは、観察可能な配列の助けを借りて簡単になります。観察可能な配列は、値の配列を保持する特別なタイプのオブザーバブルです。それらは、プッシュ、ポップ、シフト、アンシフト、逆、ソート、スプライスなどの配列を操作する機能を提供します。また、観察可能な配列は、アイテムが追加または削除されたときに加入者に通知し、UIをデータと同期させやすくします。 Knockoutjsで問題が発見された場合は、knockoutjs githubページに報告できます。問題を報告する前に、他の誰かによって問題がすでに報告されているかどうかを確認することをお勧めします。そうでない場合は、新しい問題を作成し、KnockoutJSチームが問題を理解し解決できるようにできるだけ多くの詳細を提供することができます。

以上がNockoutjsへの初心者ガイド：パート3の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。