knockout.js - knockout 包装值绑定(bind)

Question

我正在使用 mathias bynen's placeholder code如果我像这样进行简单的自定义绑定(bind)，我想将它与 knockout 一起使用:

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

和html

<input placeholder = "Line 1" data-bind="placeholder: {}, value: addressLine1">

它可以工作，但我想将它们“合并”到一个自定义绑定(bind)中，以便像使用它一样使用它

<input placeholder = "First Name" data-bind="placeholderValue: firstName">

所以我尝试了这段代码:

ko.bindingHandlers.placeholderValue = {
    init: function (element, valueAccessor) {
        $(element).placeholder();
        ko.bindingHandlers.value.init(element, valueAccessor);
    },
    update: function (element, valueAccessor) {
        ko.bindingHandlers.value.update(element, valueAccessor);
    }
};

但它让我感到

Uncaught TypeError: undefined is not a function 

我还没有真正掌握 ko

Answer 1

当您创建委托(delegate)自定义绑定(bind)作为最佳实践时，您应该始终传递 all the arguments的init和 update到内部绑定(bind)，因为您永远无法知道内部绑定(bind)使用哪些参数:

ko.bindingHandlers.placeholderValue = {
    init: function (element, valueAccessor, allBindingsAccessor, 
                    viewModel, bindingContext) {
        $(element).placeholder();
        ko.bindingHandlers.value.init(element, valueAccessor, 
             allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor, 
                     viewModel, bindingContext) {
        ko.bindingHandlers.value.update(element, valueAccessor, 
             allBindingsAccessor, viewModel, bindingContext);
    }
};

您遇到了异常，因为 init的 value投标使用 allBindingsAccessor参数，但因为您没有将其传递给它会引发异常。