如何在Knockout.js中将元素绑定到模型 [英] How to get the elements bound to a model in Knockoutjs

问题描述

我想添加一个产品，找到一个让它闪烁的节点

products = observableArray([]);

new_product = new Product();
products.push(new_product);
$("tr", new_product.elements).flash();

我尝试使用afterAdd，但是每次添加一些东西时它都会闪烁. 我只需要使用添加功能之一进行闪烁.添加的其他功能不应闪烁该元素.

注意:flash是自定义的JQuery函数

解决方案

由于可观察对象可以绑定到多个元素，所以最好的选择是以自定义绑定的形式真正地来自元素.

最简单的是，您可以使用如下绑定:

ko.bindingHandlers.flash = {
    init: function(element) {
        $(element).flash();
    }
};

在您的元素上使用它，例如:<li data-bind="flash: true"></li>.在这种情况下，传递给绑定的内容无关紧要.

以下是示例: http://jsfiddle.net/rniemeyer/Exmvh/

您当然可以将选项传递给绑定，例如:

ko.bindingHandlers.flash = {
    init: function(element, valueAccessor) {
        var duration = ko.utils.unwrapObservable(valueAccessor());
        $(element).hide().flash(duration);
    }
};

并使用它，例如:<li data-bind="flash: 500"></li>或使用可用于控制持续时间的可观察对象:<li data-bind="flash: selectedDuration"></li>

以下是示例: http://jsfiddle.net/rniemeyer/Exmvh/1/

I want to add a product, find the node an let it flash

products = observableArray([]);

new_product = new Product();
products.push(new_product);
$("tr", new_product.elements).flash();

I tried using afterAdd but it flashed each time I added something. I need to flash only with one of my adding function. The other functions which add should not flash the element.

NOTE: flash is a custom JQuery function

解决方案

Since an observable can be bound to multiple elements, your best bet is to really come at it from the element in the form of a custom binding.

At its simplest, you could use a binding like:

ko.bindingHandlers.flash = {
    init: function(element) {
        $(element).flash();
    }
};

Use it on your element like: <li data-bind="flash: true"></li>. In this case what you pass to the binding does not matter.

Here is a sample: http://jsfiddle.net/rniemeyer/Exmvh/

You can certainly pass options to your binding like:

ko.bindingHandlers.flash = {
    init: function(element, valueAccessor) {
        var duration = ko.utils.unwrapObservable(valueAccessor());
        $(element).hide().flash(duration);
    }
};

And use it like: <li data-bind="flash: 500"></li> or use an observable that you can use to control the duration: <li data-bind="flash: selectedDuration"></li>

Here is a sample: http://jsfiddle.net/rniemeyer/Exmvh/1/

这篇关于如何在Knockout.js中将元素绑定到模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！