KnockoutJs 和 JSON 数据模型的剖析答案

【问题标题】：anatomy of KnockoutJs and JSON data modelsKnockoutJs 和 JSON 数据模型的剖析
【发布时间】：2013-02-02 00:20:35
【问题描述】：

我已经开始探索 KnockoutJS，只是想看看我是否可以将它与我的 ASP.NET MVC 应用程序一起使用。并且有许多灰色区域我正在努力找出。我必须承认更多，因为我对 JSON 的理解很差，如果我没有错，那也可能是因为 ASP.NET JSON 格式，或者我完全错了，无论我需要答案。

我只想知道如何复制 ASP.NET MVC 通过 $.get 返回的数据模型。通过 JavaScript 模型。

一个简单的对象
嵌套/复杂对象

代码：

list = ko.observableArray([]);
ko.applyBindings(list);

function loadTeamMembers(projectId) {
    $.ajax({
        type: "GET",
        url: "/Project/GetTeamMembers?projectId=" + projectId,

        success: function (data) {

            $(data).each(function (index, item) {
                list.push(item);
            });
        }
    });
}

loadTeamMembers(6);

我在我的表上使用了上面的代码，我将它与 Knockout 列表（有效）进行了数据绑定。如何在列表中添加/删除新项目？我希望我在客户端需要一个 JavaScript 模型。我应该如何在客户端上创建 JavaScript 模型（寻找前面提到的两个示例）以便它与 ASP.NET MVC JSON 数据一起使用？

任何信息或链接将不胜感激。

【问题讨论】：

没有 asp.net json format 。无论来源如何，JSON 都是 JSON，并且有自己的格式规则
@charlietfl 感谢您的澄清，但您能否分享一些内部如何根据 json 数据创建 javascript 模型，例如如何复制映射到 javascript 敲除模型的 json 结构。
建议您使用一些演示并更好地理解......就像网格编辑器knockoutjs.com/examples/gridEditor.html
您将创建具有与控制器返回的相同结构的模型。试试这个：下载 fiddler 并使用它来查询 /Project/GetTeamMembers 并检查那里的结构，您可以在您的淘汰赛视图模型上复制它（或者您可以使用淘汰赛的映射功能）
是的，我将添加一个示例。

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

【解决方案1】：

这是一个使用带有附加函数的映射来操作模型内的集合的示例：

var MainViewModel = function (jsonObj) {
    //needed for accesing this inside functions
    var self = this;

    //Mapping from json object
    ko.mapping.fromJS(jsonObj, {}, self);

    //Additional properties that you might need Client-Side but that you don't have on your server viewModel
    self.CustomProperty = ko.observable();
    self.AnotherProperty = ko.observable();

    //Example of functions used to add or delete objects inside an observable array
    self.addRow = function () {
        self.loanEntries.push(new LoanEntryViewModel());
    };
    self.deleteRow = function (row) {
        self.loanEntries.remove(row);
    };
};

ko.mapping.fromJS 接受一个 json 对象并创建 ViewModel，而无需再次定义服务器端类的所有属性。我的控制器上通常有一个名为“GetMappingObject”的方法，它返回一个用于映射的空对象。

希望对您有所帮助。请务必查看以下内容：

【讨论】：

没有。这是一个客户端视图模型
调用服务器只是为了在有点脏的客户端上添加 n 个空项目。
如果您不想在客户端重新编码整个对象，有什么更好的方法？
这正是我想要的。我在这里找到了这个帖子link。这可能听起来有点骇人听闻，但至少它可以节省大量代码重复 imo，这也展示了如何基于服务器模型扩展视图模型。我无法进一步详细研究这一点，但是有很多赞成票告诉它应该可以工作，但是我在这里找不到任何工作示例。如果您发现任何有效的示例项目，请分享。
我不知道我能做到这一点。谢谢，这将节省我许多不必要的服务器之旅