knockout.js 使用映射插件从服务器映射中获取模型并将模型发回

Question

我开始使用 knockout.js，我真的很喜欢它。 我使用 ASP.Net mvc、jQuery 和 knockout.js

我的问题是： 假设我有一个用户的管理屏幕，用户是我的视图模型 在用户内部我想要一个权限数组

我的用户视图模型：

var userViewModelClass = function () {
   var self = this;
   ko.mapping.fromJS({
       ID: "",
       permissions: []
   }, {}, self);
}

现在.. 如果我向服务器发出 ajax 请求并返回 JSON，我使用映射插件，一切都按预期进行

但是...现在我希望我呈现的权限列表具有删除之类的操作。 所以我需要一个权限对象，然后权限数组将是权限对象数组。但我该怎么做？映射插件如何知道从服务器返回给他的数组中的对象实际上是在这样的对象上：

 function permission() {
   var self = this;
   this.delete = function () {       
   };
   ko.mapping.fromJS({
       name: "",
       level: ""
    }, {}, self);
}

这是我问题的第一部分。 第二部分： 假设我得到了具有所有权限数组的模型，它们都是这个权限对象。现在我希望我视图中的每个删除按钮都绑定权限对象内的删除功能。 使用：

data-bind="click: delete"

删除功能的最佳实现是什么？我想到了类似的事情：对服务器进行ajax调用，这实际上会删除用户的权限。然后如果调用成功从可观察数组中删除当前权限，则视图将更新... 这是一个好习惯吗？

谢谢！

Answer 1

第一部分。您需要使用映射选项。在您的userViewModelClass 中执行此操作。

var userViewModelClass = function () {
   var self = this;
   ko.mapping.fromJS({
       ID: "",
       permissions: []
   }, {
       permissions: {
           create: function(options) {
               return new permission(options.data);
           }
       }
   }, self);
}

然后像这样修改你的权限对象

function permission(config) {
   var self = this;
   this.delete = function () {       
   };
   ko.mapping.fromJS($.extend({
       name: "",
       level: ""
    }, config), {}, self);
}

请注意，我添加了扩展，以便您的默认结构将保留并被传入数据覆盖。

您问题的第二部分。一种可能的方法是在构造函数中传递对父级的引用。所以上面的映射选项会变成

permissions: {
    create: function(options) {
        return new permission(options.data, self);
    }
}

那么你的删除可能是这样的。

this.delete = function () {  
    $.ajax(deleteurl, yourdata, function(result) {
       // success
       parent.permissions.remove(self);
    }, function() {
       // failure
       display error message
    }     
};

编辑

在 cmets 中讨论的替代方式。

var userViewModelClass = function () {
   var self = this;
   ko.mapping.fromJS({
       ID: "",
       permissions: []
   }, {
       permissions: {
           create: function(options) {
               return new permission(options.data);
           }
       }
   }, self);

   this.delete = function(permission) {
       self.permissions.remove(permission);
   };
}

data-bind="click: $parent.delete"

希望这会有所帮助。