Knockout.js 如何在knockoutjs中创建嵌套循环

您好，我尝试了knockout.js绑定的循环中循环，但遇到了问题

我的视图模型

<script>
function Category(data) {
    this.id = ko.observable(data.Id);
    this.Name = ko.observable(data.Name);
    this.Products = ko.observableArray
    ([{
        id: ko.observable(data.Products.Id), Name: ko.observable(data.Products.Name),
    }]);
}
function CatListViewModel() {
    var self = this;
    self.Category = ko.observableArray([]);
    Category.Products = ko.observableArray([]);
    $.getJSON("/Home/Get", function (allData) {
        var mappedCats = $.map(allData, function (item) { return new Category(item); });
        self.Category(mappedCats);
        console.log(allData);
        console.log(mappedCats);
    });
}
ko.applyBindings(new CatListViewModel());

功能类别（数据）{
this.id=ko.可观察（data.id）；
this.Name=ko.observable（data.Name）；
this.Products=ko.array
([{
id:ko.observable（data.Products.id），Name:ko.observable（data.Products.Name），
}]);
}
函数CatListViewModel（）{
var self=这个；
自我类别=高可观察性指数（[]）；
类别.产品=可观察到的ko.Array（[]）；
$.getJSON（“/Home/Get”，函数（allData）{
var mappedCats=$.map（所有数据，函数（项）{返回新类别（项）；}）；
自我分类（mappedCats）；
console.log（allData）；
console.log（mappedCats）；
});
}
应用绑定（新的CatListViewModel（））；

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);
    }

publicjsonresult Get（）
{
var catList=新列表（）；
对于（int i=0；i<20；i++）
{
var procList=新列表（）；
var Cat=新类别（）
{
Id=i.ToString（），
Name=“Category”+i，
};
对于（int j=0；j<20；j++）
{
var prod=新产品（）
{
Id=j.ToString（），
名称=i+“猫”+j+“产品”，
价格=i+j.ToString（），
};
procList.Add（prod）；
}
Cat.Products=procList；
catList.Add（Cat）；
}
返回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>

类别0


第一类


第2类


... 更多项目

---

外部循环渲染正确，但我没有从内部循环得到任何信息，甚至没有错误消息

我认为您的HTML不正确，请删除

产品

块中的

类别。

，因为默认情况下它将引用每个父

类别

：

<!-- 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

专门引用父级

类别

属性：

foreach:$data.Products

我怀疑这是一个类别。产品不包含您所期望的内容。将

放在html中第二个foreach上方，检查原始数据。也许你只需要将“Category.Products”替换为“$data.Products”。谢谢，我想你是对的，我把你的绑定放在第二个foreach上面，输出是[]，但我不知道如何解决这个问题。你能帮我解决这个问题吗？“Category”对象包含你期望的内容吗（在第一个foreach之前进行类似的检查）？是否是一个类别数组，每个类别都包含一个产品数组？那么您只需在第二个foreach中将“Category.Products”替换为“$data.Products”，因为您可能需要每个类别的产品和“$data”token将引用外部foreach的当前迭代项。谢谢，我也尝试了，但仍然无法实现。我认为我的视图模型是错误的，但我无法解决该问题。@ierhalim如果您创建一个JSFIDLE复制该问题，我将查看