javascript - Knockoutjs 计算传递参数

Question

我想知道 knockoutjs 是否可以在绑定(bind)时传递参数。

我正在绑定(bind)一个复选框列表，并想绑定(bind)到我的 View 模型中的单个计算可观察对象。在我的 View 模型中(基于传递给读取函数的参数)我想根据某些条件返回 true/false。

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

有什么建议吗？

Answer 1

创建一个函数，其唯一目的是返回一个计算的可观察值。它可以根据需要接受参数。如果您希望它成为双向绑定(bind)，则它必须是一个单独的计算可观察对象。

然后在您的绑定(bind)中，使用适当的参数调用该函数。它返回的计算可观察值将绑定(bind)到您的 View 中，并将照常更新。

这是 a fiddle我在哪里使用这种技术来创建事件处理程序。您可以在这里做类似的事情。

您可以通过使函数成为可观察对象的方法来保持它的整洁。通过添加到 ko.observable.fn 原型(prototype)或直接将其添加到可观察实例。

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

然后应用到你的 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)"/>

Demo

---

但是，如果您只是想将所有这些复选框绑定(bind)到 View 模型中的单个值，则不需要这样做。在您的 View 模型中对数组使用 checked 绑定(bind)，并为您的复选框赋值。每个选中的值都将添加到数组中。这将是双向绑定(bind)。

<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([])
};

Demo