我如何在knockoutjs中嵌套循環

你好，我嘗試循環爲knockout.js綁定循環，但有麻煩。我如何在knockoutjs中嵌套循環

我的視圖模型

HTML元素

<ul data-bind='foreach:Category'> 
    <li><span data-bind='text:Name'></span> 
     <ul data-bind='foreach:Category.Products'> 
      <li data-bind='text:Name'></li> 
     </ul> 
    </li> 
</ul>

服務器端模型

 public JsonResult Get() 
    { 
     var catList = new List<Category>(); 

     for (int i = 0; i < 20; i++) 
     { 
      var procList = new List<Product>(); 
      var Cat = new Category() 
      { 
       Id = i.ToString(), 
       Name = "Category " + i, 
      }; 
      for (int j = 0; j < 20; j++) 
      { 
       var prod = new Product() 
       { 
        Id = j.ToString(), 
        Name = i + " Cats " + j + " Prod", 
        Price = i + j.ToString(), 

       }; 
       procList.Add(prod); 
      } 
      Cat.Products = procList; 
      catList.Add(Cat); 
     } 
     return Json(catList, JsonRequestBehavior.AllowGet); 
    }

HTML輸出

<ul data-bind="foreach:Category"> 
    <li><span data-bind="text:Name">Category 0</span> 
     <ul data-bind="foreach:Category.Products"></ul> 
    </li> 

    <li><span data-bind="text:Name">Category 1</span> 
     <ul data-bind="foreach:Category.Products"></ul> 
    </li> 

    <li><span data-bind="text:Name">Category 2</span> 
     <ul data-bind="foreach:Category.Products"></ul> 
    </li> 

    ... More item 
</ul>

外部循環呈現正確，但我沒有從內部循環獲取任何內容，甚至沒有得到錯誤消息。

來源

2014-03-27 ierhalim

我懷疑Category.Products不包含你的期望。將＃

'放在HTML中的第二個foreach上檢查原始數據。也許你只需要用「$ data.Products」替換「Category.Products」。 – TvdH

謝謝，我認爲你是對的，我把你的綁定上面的第二個foreach和輸出是[]但我沒有任何想法解決這個問題，你會幫助解決這個問題嗎？ – ierhalim

「Category」對象是否包含您期望的內容（執行與之前類似的檢查，但在第一個foreach之前）？它是一個包含一系列產品的類別數組嗎？那麼你只需在第二個foreach中將「Category.Products」替換爲「$ data.Products」，因爲你可能需要每個類別的產品，而「$ data」標記將引用外部foreach的當前迭代項。 – TvdH

您的HTML不正確的看我，取出Category.在Products塊，因爲它會默認引用每個家長Category：

<!-- Loop over each Category --> 
<ul data-bind="foreach:Category"> 
    <li> 
     <span data-bind="text:Name"></span> 
     <!-- Loop over each Product in the current category --> 
     <ul data-bind="foreach:Products">     
      <li> 
       <span data-bind="text:Name"></span> 
      </li> 
     </ul> 
    </li> 
</ul>

如果不行，用$data專門引用父母Category特性：foreach:$data.Products。

來源

2014-03-27 16:24:13 Tanner

謝謝我也嘗試過，但仍然無法做到我認爲我的視圖模型是錯誤的，但我無法解決這個問題。 – ierhalim

@ierhalim如果您創建了一個複製該問題的JSFiddle，我將查看 – Tanner

我如何在knockoutjs中嵌套循環

回答

相關問題