KnockoutJS:将 Observable 属性和函数添加到映射生成的 ObservableArray 中的对象 [英] KnockoutJS: Adding Observable Properties and Functions to objects in a mapping generated ObservableArray

问题描述

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

这是我要做的:

• 我有一个 Users
的 JSON 数组
• 我已经使用映射插件创建了 ko.observableArray()
• 我有一个模板可以为每个 User 创建表格行，到目前为止一切都很好:o)

这是我想要做的:

每个 User 都有一个名为 'IsActive' 的属性 - 我想数据绑定一个点击事件到每个切换此 'IsActive' 属性的 User 对象.

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

我在这方面考虑得更多，这里有一种方法可以声明额外的属性或方法，并让它们扩展 mapping 生成的对象，但本文关注的是单个对象，而不是扩展生成数组中的对象.

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

感谢您的帮助

解决方案

您可以考虑多种选择.

-一种是使用 create 回调 控制用户"对象的创建方式.您可以自己定义 observable 并添加额外的功能，也可以在单个用户对象上调用映射插件，然后添加额外的功能.

可能类似于:http://jsfiddle.net/rniemeyer/fkVaK/

-否则，您可以将切换"功能放在您的视图模型上，然后将用户"对象传递给它.

1.3 的一个很好的方法是使用 ko.dataFor 以及类似 jQuery 的 live/delegate/on 事件委托功能的东西.会像:http://jsfiddle.net/rniemeyer/FkjNr/

//不显眼的事件处理程序$(".toggle").live("click", function() {var user = ko.dataFor(this);如果(用户){viewModel.toggleIsActive(user);}});

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

从 2.0 开始，当前数据在使用单击/事件绑定时会自动传递给处理程序，因此您可以这样做:

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

I'm new to KnockoutJS, and I'm stuck trying to add additional properties and methods to the generated objects in the ko.observableArray() as created by the mapping plugin.

Here's where I'm up to:

• I have a JSON array of Users
• I've created the ko.observableArray() with the mapping plugin
• I've got a template that creates table row for each User, so far so good :o)

Here's what I'm trying to do:

Each User has a property called 'IsActive' - I'd like to data-bind a click event to a method on each User object that toggles this 'IsActive' property.

This question looked promising, but it seems like unnecessary duplication to me to have to declare the entire View Model in JS (unless that's the way I have to do it!) - is it possible to just extend the generated object?

I was thinking more along these lines, where there's a way to declare additional properties or methods, and have them extend the mapping generated objects, but this article is concerned with single objects rather than extending objects in a generated array.

Here's the code: http://jsfiddle.net/yZkSf/2/ (not yet working in JS fiddle - but I'll keep playing with it and update this link when I get it working).

Thank you for your help

解决方案

There are several options that you could consider.

-One is to use the create callback to control how your "user" objects get created. You can either define the observables yourself and add extra functionality or call the mapping plugin on the individual user object and then add extra functionality.

Would be something like: http://jsfiddle.net/rniemeyer/fkVaK/

-Otherwise, you can place the "toggle" function on your viewModel and then pass the "user" object to it.

A nice way with 1.3, is to use ko.dataFor along with something like jQuery's live/delegate/on event delegation functionality. Would be like: http://jsfiddle.net/rniemeyer/FkjNr/

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

If you don't want to use event delegation, then you can pass the item directly using an anonymous function like: http://jsfiddle.net/rniemeyer/GpQtN/

EDIT: as of 2.0, the current data automatically gets passed to the handler when using click/event bindings, so you can just do:

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

这篇关于KnockoutJS:将 Observable 属性和函数添加到映射生成的 ObservableArray 中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！