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.htm 的檔案中。
在瀏覽器中開啟此 HTML 檔案。

您可以使用 as 關鍵字重寫上述程式碼。只需更改繫結行，如下面的程式碼所示。

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

示例

讓我們來看另一個示例，使用可觀察陣列填充列表詳細資訊。

線上演示

<!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.htm 的檔案中。
在瀏覽器中開啟此 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 提供的 destroy 陣列函式銷燬陣列項（當前隱藏，稍後刪除）。這些項不會顯示在 foreach 中，並且會自動隱藏。要檢視這些隱藏的項，KO 提供了一種名為 includeDestroyed 的方法。如果將此引數設定為布林值 true，則會顯示隱藏的項。

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

knockoutjs_declarative_bindings.htm

列印頁面