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'的属性-我想对每个User对象上的方法进行data-bind点击事件，以触发该'IsActive'属性.

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

我正在沿着这些思路进行思考，这里有一种方法可以声明其他属性或方法，并使它们扩展mapping生成的对象，但是本文关注的是单个对象，而不是扩展生成的数组中的对象.

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

谢谢您的帮助

解决方案

您可以考虑几个选项.

-一种方法是使用 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版开始，使用单击/事件绑定时，当前数据会自动传递到处理程序，因此您可以执行以下操作:

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

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屋！