如何在ASP.NET MVC项目中为knockout生成客户端视图模型?

Mor*_*ner 11 javascript c# asp.net-mvc mvvm knockout.js

我目前正在开发一个ASP.NET MVC解决方案,最近又推出了Knockout(MVVM JS库)和Wijmo(一组jQuery UI小部件).

随着Knockout的引入,我还需要在客户端有模型,所以为了这个目的,我正在序列化C#ViewModel并使用它将它附加到视图data-model="@Model.ToJson()".这允许我从JS检索模型并对一切应用一些客户端的爱.

但是,knockout需要一切都是可观察的,所以我需要声明一个单独的客户端ViewModel并映射数据模型对象的所有内容.这感觉非常像重复的努力,我想以某种方式避免它.

我希望有人有一个共享的工具或技术,这将允许我直接从服务器渲染淘汰ViewModel.可能的解决方案包括:

  • 自定义JSON序列化,以将可观察视图模型直接呈现给data-model属性中的输出.
  • 自动客户端转换(我听说过ko-autobind,但我不确定它是否是推荐的路径或者它是如何稳定/完整的)
  • 我没有想到的东西

我希望解决方案是通用的和自动的,因为我目前用手工输入可观察的客户端视图模型的方法实在是太没用了.

你是怎么解决这个问题的?

CD *_*ith 10

根据他们的教程,它只是一个简单的.map功能

如果这是ViewModel

function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}
Run Code Online (Sandbox Code Playgroud)

并且该函数从服务器获取数据,它使用该.map函数将服务器数据直接注入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);
});
Run Code Online (Sandbox Code Playgroud)

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

对于自动绑定,这是一个例子

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