我如何在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中嵌套循环

回答

相关问题