0

我开始使用 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调用，这实际上会删除用户的权限。那么如果调用成功从可观察数组中删除当前权限，那么视图将更新......这是一个好习惯吗？

谢谢！

4

1 回答 1

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
    }     
};

编辑

评论中讨论的替代方式。

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"

希望这可以帮助。

于 2012-06-14T15:35:37.513 回答