KnockoutJS：向映射生成的 ObservableArray 中的对象添加 Observable 属性和函数

Question

我是 KnockoutJS 的新手，我一直在尝试向 < 中生成的对象添加其他属性和方法。 code>ko.observableArray() 由 mapping 插件创建。

这是我要做的：

• 我有一个 Users 的 JSON 数组，
• 我使用映射插件创建了 ko.observableArray()
• 我有一个为每个用户创建表格行的模板，到目前为止一切顺利：o）

这是我想要做的：

每个用户< /code> 有一个名为'IsActive' - 我想将点击事件数据绑定到每个User对象上切换此'的方法IsActive' 属性。

这个问题看起来很有希望，但对我来说似乎是不必要的重复在 JS 中声明整个视图模型（除非我必须这样做！） - 是否可以只扩展生成的对象？

我沿着这些思路思考更多，有一种方法可以声明其他属性或方法，并让它们扩展映射生成的对象，但本文关注的是单个对象，而不是扩展生成的数组中的对象。

代码如下： http://jsfiddle.net/yZkSf/2/ （尚未在 JS fiddle 中工作 - 但我会继续使用它，并在它工作时更新此链接）。

Answer 1

您可以考虑多种选择。

-一种是使用create回调来控制如何创建“用户”对象。您可以自己定义可观察量并添加额外的功能，也可以在单个用户对象上调用映射插件，然后添加额外的功能。

类似于： http://jsfiddle.net/rniemeyer/fkVaK/

-否则，您可以将“toggle”函数放在 viewModel 上，然后将“user”对象传递给它。

1.3 的一个好方法是使用 ko.dataFor 以及 jQuery 的 live/delegate/on 事件委托功能之类的功能。就像： http://jsfiddle.net/rniemeyer/FkjNr/

//unobtrusive event handler
$(".toggle").live("click", function() {
    var user = ko.dataFor(this);
    if (user) {
       viewModel.toggleIsActive(user);
    }
});

如果你不想要使用事件委托，那么您可以使用匿名函数直接传递项目，例如： http://jsfiddle.net/rniemeyer/GpQtN/

编辑：从 2.0 开始，使用 click/event 绑定时当前数据会自动传递到处理程序，因此您可以执行以下操作：

<a href="#" data-bind="click: $root.toggleIsActive"><span data-bind="text: IsActive"></span></a>

Answer 2

这是我使用你和瑞安的答案得出的结果......似乎有效。请留下反馈，因为我是淘汰赛的新手，我自己也很好奇，这是否是一个好方法。

JS:

$(function() {
    $.get("users/getUsers", function(r){
        var vm = ko.mapping.fromJS(r, {
            users: {
                create: function(user){
                    var methods = {
                        toggleIsActive: function(u){u.IsActive(!u.IsActive());},
                        foo: function(u){console.log(u);},
                        bar: function(u){/*whatever*/},   
                    }
                    return $.extend(ko.mapping.fromJS(user.data), methods);
                }
            }
        });
        ko.applyBindings(vm);
    }, 'json');
});

DOM:

<!-- ko foreach: users -->
   <a href="#" data-bind="click: toggleIsActive"><span data-bind="text: IsActive"></span></a>
<!-- /ko -->

Answer 3

我找到了一种方法来做到这一点，但这意味着一旦创建了数组中生成的对象，就对其进行循环。我更喜欢一种无需额外循环即可实现相同结果的方法。

编辑： 就像 RP Niemeyer 在他的回答中建议的那样！ ;o)

无论如何，向现有对象添加属性的一种方法是使用jQuery extends() 组合对象。

首先，在新对象中声明额外的属性和函数：

var userModel = {
    toggleIsActive: function() {
        console.log('toggleIsActive called: before: ' + this.IsActive());
        this.IsActive(!this.IsActive());
        // todo: save!
        console.log('toggleIsActive called: after: ' + this.IsActive());
    }
}

然后，在 ko.mapping.fromJS() 调用之后，但在 ko.applyBindings() 之前> 调用，循环遍历生成数组中的对象并扩展它们：

viewModel.users = ko.mapping.fromJSON(/* get JSON */);

for (var i = 0; i < viewModel.users().length; i++) {
    $.extend(viewModel.users()[i], userModel);
}

ko.applyBindings(viewModel);