c# - 如何在 ASP.NET MVC 项目中生成用于 knockout 的客户端 View 模型？

Question

我目前正在研究 ASP.NET MVC 解决方案，并且最近引入了 Knockout(一个 MVVM JS 库)和 Wijmo(一组 jQuery UI 小部件)。

随着 Knockout 的引入，我还需要在客户端拥有模型，因此为此我正在序列化 C# ViewModel 并使用 data-model="@Model.ToJson() 将其附加到 View “。这允许我从 JS 检索模型并将一些客户端的爱应用到一切。

但是，knockout 需要所有内容都是可观察的，因此我需要声明一个单独的客户端 ViewModel 并映射来自数据模型对象的所有内容。这感觉非常像重复工作，我想以某种方式避免它。

我希望有人可以分享一种工具或技术，让我可以直接从服务器呈现 knockout ViewModel。可能的解决方案可能包括:

• 自定义 JSON 序列化以将可观察 View 模型直接渲染到数据模型属性中的输出。
• 自动客户端转换(我听说过 ko-autobind，但不确定它是否是推荐的路径或它有多稳定/完整)
• 我还没有想到

我希望解决方案是通用的和自动的，因为我目前手动输入可观察的客户端 View 模型的方法效率太低，不可行。

你是如何解决这个问题的？

Answer 1

根据他们的教程，这只是一个简单的 .map 函数

如果这是 ViewModel

function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

此函数从服务器获取数据，它使用.map 函数将服务器数据直接注入(inject)VM

// Data
var self = this;
self.tasks = ko.observableArray([]);

// Load initial state from server, convert it to Task instances, then populate self.tasks
$.getJSON("/tasks", function(allData) {
    var mappedTasks = $.map(allData, function(item) {
        return new Task(item)
    });
    self.tasks(mappedTasks);
});

用于 ko 映射 http://knockoutjs.com/documentation/plugins-mapping.html

这里有一个自动绑定(bind)的例子

https://groups.google.com/forum/#!msg/knockoutjs/IJTx37UXQVw/UTrWdEK1C-oJ