使用 KnockoutJs 和 Asp.net MVC 的嵌套集合答案

【问题标题】：Nested Collection with KnockoutJs and Asp.net MVC使用 KnockoutJs 和 Asp.net MVC 的嵌套集合
【发布时间】：2014-02-01 04:05:04
【问题描述】：

我在下面有这个 .net 类

public class JobDetailsDTO
{
    public string JobName { get; set; }
    public string CompanyName { get; set; }
    public String[] IndustryName;
}

我正在尝试将其映射到 Knockout JS 模型，我的嵌套集合似乎不起作用，我在 JS 模型中做错了什么？

var jobViewModel = {
    jobDetailsDTO: ko.observableArray(),
    currentPage: ko.observable(-1),
    industries: ko.observableArray(industries),
    contentLoadTriggered: false
};

这是我的数据绑定

<div id="jobcontent-wrapper" data-bind="foreach: jobDetailsDTO">
    <label data-bind="text: JobName"></label>
    <span class="jobsize" data-bind="text: CompanyName"> </span>
    <div class="col-md-12" data-bind="foreach: industries">
        <span class="glyphicon glyphicon-heart"></span>
        Industry
        <span class="jobsize" data-bind="text: IndustryName"></span>
    </div>
</div>
<div id="jobcontent-wrapper" data-bind="foreach: jobDetailsDTO">
    <label data-bind="text: JobName"></label>
    <span class="jobsize" data-bind="text: CompanyName"> </span>
    <div class="col-md-12" data-bind="foreach: industries">
        <span class="glyphicon glyphicon-heart"></span>
        Industry
        <span class="jobsize" data-bind="text: IndustryName"></span>
    </div>
</div>

这是我获取数据的ajax

function getData(pageNumber) {
    if (jobViewModel.currentPage() != pageNumber) {
        $.ajax({
        url: "/api/jobservice/getjob",
        type: "get",
        contentType: "application/json",
        data: { id: pageNumber }
        }).done(function (data) {
            if (data.length > 0) {
                for (i = 0; i < data.length; i++) {
                    jobViewModel.jobDetailsDTO.push(data[i]);
                }
            }
        });
    }
}

这是我从控制器获得的 JSOn

[{"IndustryName":["RIE","XSL","FWTI","QPCAP","PPGPUU"],"JobName":"KLLFBN","CompanyName":"CKI"},{" IndustryName":["SAF","JIF","MVFG","RPAIP","ALAUKM"],"JobName":"ROULJS","CompanyName":"LXN"},{"IndustryName":["IIH ","PEM","TINE","EOAXF","ZYJHKK"],"JobName":"ISUYFV","CompanyName":"VZR"}]

当我在我的视图模型中禁用此行时，它可以提取数据，但是当我启用此行时，它不会在那之后执行任何 JS。我的假设是我定义子集合的方式有问题。我在 Firefox firebug 的控制台上看不到任何错误消息

var jobViewModel = {
    jobDetailsDTO: ko.observableArray(),
    currentPage: ko.observable(-1),
    industries: ko.observableArray(industries), ///this line
    contentLoadTriggered: false
};

【问题讨论】：

可以添加控制器代码吗？
您在浏览器控制台中是否遇到任何错误？ jobDetailsDTO 在jobViewModel 中是否有industries 的列表，确保视图模型jobViewModel 中的jobDetailsDTO 有JobName、CompanyName 和industries 的列表
您需要更具体一些，“xyz 看起来好像不起作用”有点太含糊了。帮助我们重现此问题（仅使用相关代码），告诉我们您遇到了什么具体错误以及在哪里等。
@Jeroen 更新了一些细节，我的猜测是正在定义的子集合在 KO js 库中失败。

标签： c# javascript jquery asp.net-mvc knockout.js

【解决方案1】：

在jobViewModel 对象初始化之前，我没有在您的代码中看到任何提及industries 变量的内容。问题可能是您没有为industries 变量设置任何对象吗？

我认为您应该做的是删除您所指的jobViewModel 初始化中的行。然后，由于您返回的 JSON 有一个名为 IndustryName 的属性，它是一个字符串数组（并且没有名为 industries 的属性），我认为您还应该将您的 html 绑定重写为类似于以下内容（从您的原始绑定在第 4 行和第 7 行）：

1. <div id="jobcontent-wrapper" data-bind="foreach: jobDetailsDTO">
2.     <label data-bind="text: JobName"></label>
3.     <span class="jobsize" data-bind="text: CompanyName"> </span>
4.     <div class="col-md-12" data-bind="foreach: IndustryName">
5.         <span class="glyphicon glyphicon-heart"></span>
6.         Industry
7.         <span class="jobsize" data-bind="text: $data"></span>
8.     </div>
9. </div>

【讨论】：