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

问题描述

我想知道knockoutjs是否可以在绑定时传递参数.

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

我正在绑定一个复选框列表，并希望绑定到我的视图模型中的单个计算 observable.在我的视图模型中(基于传递给读取函数的参数)，我想根据某些条件返回真/假.

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)" />

有什么建议吗?

推荐答案

创建一个函数，其唯一目的是返回一个计算出的 observable.它可以根据需要接收参数.如果你希望它是一个双向绑定，它必须是一个单独的计算 observable.

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.

然后在您的绑定中，使用适当的参数调用该函数.它返回的计算出的 observable 将绑定到您的视图中，并将照常更新.

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 原型或直接将其添加到 observable 实例.

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);
}    

然后应用到您的视图

<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)"/>

演示

但是，如果您只是想将所有这些复选框绑定到视图模型中的单个值，则不需要这样做.在您的视图模型中的数组上使用 checked 绑定，并为您的复选框指定一个值.每个选中的值都将添加到数组中.它将是双向绑定.

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