KnockoutJS-Foreachバインディング

このバインディングでは、各配列項目はループ内のHTMLマークアップで参照されます。これは、リストまたはテーブルデータを作成するときに非常に便利です。 foreach は、他の制御フローバインディングとともにネストできます。

構文

foreach: <binding-array>

パラメーター

配列名はパラメーターとして渡されます。 HTMLマークアップは、ループ内の各アイテムに対して処理されます。
JavaScriptオブジェクトリテラルはパラメーターとして渡すことができ、dataというプロパティを使用して反復処理できます。
パラメーターが観測可能なパラメーターである場合、行われた変更は、基礎となる観測可能な変更が行われるとすぐにUIに反映されます。

例

foreachバインディングの使用法を示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS foreach binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>List of courses available:</p>
      <div data-bind = "foreach: courseArray ">
         <li data-bind = "text: $data"><span data-bind="text: $index"></span></li>
      </div>

      <script type="text/javascript">
         function AppViewModel() {
            this.courseArray = (['JavaScript','KnockoutJS','BackboneJS','EmberJS']);
            this.courseArray.push('HTML');
         };

         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

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

上記のコードを foreach-bind ファイルに保存します。

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

*as* キーワードを使用して上記のコードを書き換えることができます。 次のコードに示すように、バインディングラインを変更するだけです。

<div data-bind = "foreach: {data: courseArray, as :'cA' }">

例

Observable Arrayを使用してリストの詳細を設定する別の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS foreach binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>List of product details:</p>
      <ul data-bind = "foreach: productArray ">
         <li>
            <span data-bind = "text: productName"></span>
            <a href = "#" data-bind = "click: $parent.removeProduct">Remove </a>
         </li>
      </ul>

      <script type = "text/javascript">
         function AppViewModel() {
            self = this;
            self.productArray = ko.observableArray ([
               {productName: 'Milk'},
               {productName: 'Oil'},
               {productName: 'Shampoo'}
            ]);

            self.removeProduct = function() {
               self.productArray.remove(this);
            }
         };

         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

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

上記のコードを foreach-bind-using-observable ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
[リンクの削除]をクリックすると、リストからアイテムが動的に削除されます。

観察

コンテナなしでforeachを利用する

コンテナを使用してforeachを含めることができない場合があります。そのような状況では、コンテナレス形式を使用してバインディングを呼び出すことができます。

<ul>
   <!-- ko foreach: productArray -->

   <li>
      <span data-bind="text: productName"></span>
      <a href="#" data-bind="click: $parent.removeProduct">Remove </a>
      <!--/ko  -->
   </li>

</ul>

<！-ko→および<！-/ko→は、開始および終了マーカーとして機能し、仮想構文となり、データを実際のコンテナのようにバインドします。

配列内の破壊されたアイテムの処理

KOが提供する destroy 配列関数を使用して、配列項目を破棄できます（現在非表示にし、後で削除します）。これらのアイテムはforeachには表示されず、自動的に非表示になります。これらの隠されたアイテムを見るために、KOは includeDestroyed と呼ばれるメソッドを提供します。このパラメーターがブール値trueに設定されている場合、非表示のアイテムが表示されます。

<div data-bind = "foreach: {data: courseArray, includeDestroyed: true  }">
   ...
   ...
   ...
</div>

Knockoutjs-foreach-binding

目次

KnockoutJS-Foreachバインディング

構文

パラメーター

例

出力

例

出力

観察

コンテナなしでforeachを利用する

配列内の破壊されたアイテムの処理