knockout.js - MVC 4 knockout 列表

Question

我一直在尝试按照 Knockout.js 的教程进行操作，以便在我的 View 中呈现表格。我的 Controller 正在检索作为 IEnumerable 类型的记录列表并发送到 View 。我正在尝试让 Knockout 映射工作以在 HTML 表中显示我的记录。

我的模型看起来像:

public class ImportItem
{
    public string LName { get; set; }
    public string FName { get; set; }
    public string HPhone { get; set; }
    public string EMailAddress { get; set; }
    public string OtherPhone { get; set; }
}

我似乎无法将 IEnumerable 传递给 View ，甚至无法获得仅显示 LName 和 FName 的简单表格。有没有人有我可以查看的使用 knockout 映射的示例代码？

下面解决了

在我的 View 顶部，我添加了:

@model IEnumerable<MyProject.Models.ImportItem>
@{    
    var jsonData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
}

我的javascript:

$(function () {
        var viewModelJSON = ko.mapping.fromJSON('@Html.Raw(jsonData)');

        ko.applyBindings(viewModelJSON);
    });

我的 html 绑定(bind)，$data 最终成为引用未命名数组的键:

<table>
  <thead><tr>
    <th>Last Name</th>
  </tr></thead>
  <tbody data-bind="foreach: $data">
    <tr>
      <td data-bind="text: LName"></td>
    </tr>    
  </tbody>
</table>

Answer 1

映射插件用于从 javascript (JSON) 对象映射。你可以做的是在 Controller 中，将你需要发送的所有数据序列化为一个 JSON 字符串，并将其设置为你发送到 View 的模型的一个属性:

public class MyModel
{
    public string JsonData { get; set; }
}

生成数据后，您可以使用序列化程序(存在很多，在下面的示例中我使用 Json.NET)将其转换为 JSON 字符串。

model.JsonData = JsonConvert.SerializeObject(importItems);

然后在您的 View 中，您可以使用映射插件映射您的 JSON 对象，使用 json2.js用于解析字符串并将其转换为 JSON。

<script type="text/javascript">
    var viewModel = ko.mapping.fromJS($.parseJSON('@Html.Raw(Model.JsonData)'));
    ko.applyBindings(viewModel);
</script>

或者，您可以发送您的 IEnumerable模型到 View 的方式与您在问题中的方式相同，并在执行 javascript 解析和映射之前在 View 中(而不是在 Controller 中)使用 Razor 将它们序列化。如果您想尽可能严格地遵循 MVC 模式，这可能是更好的方法。

所以在 <script> 之前 block ，你可以打开一个 Razor 代码块并声明一个变量来保存序列化的 IEnumerable，所以像这样:

@{
    string jsonData = JsonConvert.SerializeObject(Model);
}

然后在 javascript block 中:

var viewModel = ko.mapping.fromJS($.parseJSON('@Html.Raw(jsonData)'));

要知道什么属性绑定(bind)你的data-bind="foreach ..."标记，您可能必须在 javascript 中进行一些调试以检查 viewModel 对象并查看映射插件如何准确映射您的 IEnumerable<ImportItems> .我只用一个模型做过这件事，所以我真的不确定会发生什么。