Knockoutjs计算传递参数 [英] Knockoutjs computed passing parameters

问题描述

我想知道是否有可能与knockoutjs到绑定时传递参数。

I am wondering if it is possible with knockoutjs to pass arguments when binding.

我绑定的复选框的列表，并想绑定到一个单一的计算观察到在我的视图模型。在我的视图模型（基于传递给读取功能参数）我想在一定条件下，返回真/假。

I am binding a list of checkboxes and would like to bind to a single computed observable in my viewmodel. In my viewmodel (based on parameter passed to the read function) I want to return true/false based on certain conditions.

var myViewModel=function(){
    this.myprop=ko.computed({read: function(){
    //would like to receive an argument here to do my logic and return based on argument.
}
});
};

<input type="checkbox" data-bind="checked: myprop(someval1)" />
<input type="checkbox" data-bind="checked: myprop(someval2)" />
<input type="checkbox" data-bind="checked: myprop(someval3)" />

有什么建议？

推荐答案

简单。创建其唯一的目的是返回一个计算观察到的一个功能。这可能需要在参数你想要的。它必须是一个独立的，如果你希望它是计算一个观察的双向绑定。

Simple. Create a function whose sole purpose is to return a computed observable. It may take in parameters as you wanted. It will have to be a separate computed observable if you want it to be a two-way binding.

然后在你的绑定，调用带有适当的参数该功能。该计算观察到它返回你的观点将被绑定到，并会更新照常进行。

Then in your binding, call that function with the appropriate arguments. The computed observable it returns will be bound to in your view and will update as usual.

下面的小提琴，我用这个技术来创建事件处理程序。你可以在这里做类似的事情。

Here's a fiddle where I used this technique for creating event handlers. You can do something similar here.

您可以通过功能上可观测的方法保持它的清洁。通过添加到 ko.observable.fn 原型或直接添加它可观察的实例。

You can keep it clean by making the function a method on the observable. Either by adding to the ko.observable.fn prototype or adding it directly to the observable instance.

ko.observable.fn.bit = function (bit) {
    return ko.computed({
        read: function () {
            return !!(this() & bit);
        },
        write: function (checked) {
            if (checked)
                this(this() | bit);
            else
                this(this() & ~bit);
        }
    }, this);
};
// or
function ViewModel() {
    this.flags = ko.observable(0);

    this.flags.bit = function (bit) {
        return ko.computed({
            read: function () {
                return !!(this() & bit);
            },
            write: function (checked) {
                if (checked)
                    this(this() | bit);
                else
                    this(this() & ~bit);
            }
        }, this);
    }.bind(this.flags);
}    

然后应用到您的视图

Then apply to your view

<input type="checkbox" data-bind="checked: flags.bit(0x1)"/>
<input type="checkbox" data-bind="checked: flags.bit(0x2)"/>
<input type="checkbox" data-bind="checked: flags.bit(0x4)"/>
<input type="checkbox" data-bind="checked: flags.bit(0x8)"/>

演示

然而，如果你只是想所有这些复选框可以将单个值绑定在你的视图模型，你不需要做。使用检查阵列上绑定你的视图模型，给你的复选框的值。每个检查值将被添加到阵列。这将是一个双向绑定。

However if you are just trying to bind all those checkboxes to a single value in your view model, you don't need to do that. Use the checked binding on an array in your view model and give your checkboxes a value. Every checked value will be added to the array. And it will be a two way binding.

<input type="checkbox" data-bind="checked: checkedValues, value: 1"/>
<input type="checkbox" data-bind="checked: checkedValues, value: 2"/>
<input type="checkbox" data-bind="checked: checkedValues, value: 3"/>
<input type="checkbox" data-bind="checked: checkedValues, value: 4"/>

var viewModel = {
    checkedValues: ko.observableArray([])
};

演示

这篇关于Knockoutjs计算传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！