Knockout.js：自定义绑定中的数组参数答案

【问题标题】：Knockout.js: array parameter in custom bindingKnockout.js：自定义绑定中的数组参数
【发布时间】：2011-11-14 09:08:45
【问题描述】：

我尝试编写自定义列表绑定。这是我到目前为止所拥有的：

var myArr = ko.observableArray();
myArr.push("foo");
myArr.push("bar");

var view = {
    matches: myArr
}

ko.bindingHandlers.matchList = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            // gives me 0
            console.log(valueAccessor().length);
            // gives me 2
            console.log(valueAccessor()().length);

        },
    };

// Activates knockout.js
ko.applyBindings(view);

我的 html 绑定如下所示：

<div data-bind="matchList: matches"></div>

为什么我必须使用第二对括号才能进入我的数组？

【问题讨论】：

标签： javascript arrays knockout.js

【解决方案1】：

valueAccessor 是一个函数，它返回传递给绑定的内容。它被包装在一个函数中，因此不会立即对其进行评估。

典型的模式是：

var value = ko.utils.unwrapObservable(valueAccessor());

ko.utils.unwrapObservable 将安全地处理可观察对象和不可观察对象并返回值。所以，如果它是一个 observable，那么它将返回yourValue()，否则它只会返回yourValue。这允许您的绑定支持针对可观察对象或普通属性的绑定。

另外，有些绑定需要处理 observable 本身，有些绑定需要处理 observable 的值。因此，默认情况下，observable 不会被解包。因此， valueAccessor() 返回您的 observable（它是一个函数），然后由您决定是要打开它以获取值还是设置它的值。

【讨论】：

【解决方案2】：

我认为这里令人困惑的是传递给init 的valueAccessor 与传递给update 的同名参数不同。在 init 中，它是一个返回函数的函数，这些函数又返回你的数组。从他们的documentation 中查看此示例代码。我在最后添加了两个控制台日志，它们应该向您显示 valueAccessor() 返回的函数：

var myArr = ko.observableArray();
myArr.push("foo");
myArr.push("bar");

var view = {
    matches: myArr
}

ko.bindingHandlers.matchList = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to
            $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false
            console.log(value);
            console.log(valueAccessor().toString());
        }
    };

// Activates knockout.js
ko.applyBindings(view);

【讨论】：