【问题标题】:Knockout wrap value binding淘汰赛包装值绑定
【发布时间】:2013-08-02 19:19:43
【问题描述】:

我正在使用mathias bynen's placeholder code,如果我像这样进行简单的自定义绑定,我想将它与淘汰赛一起使用:

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

和 html

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

它有效,但我想将它们“合并”到一个自定义绑定中,以便像使用它一样使用它

<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

【问题讨论】:

    标签: knockout.js


    【解决方案1】:

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

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

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

    【讨论】:

    • 非常感谢@nemesv,实际上我这些天一直在搞乱我的代码,因为我无法为其他场景制定类似的解决方案。至少你告诉我这个来改变它们已经足够快了
    • 谢谢。 1 个可能对其他人有所帮助的小改动:我需要将占位符调用包装在超时 setTimeout(function(){ $(element).placeholder();},0) 中,以便代码与 valueUpdate: 'afterkeydown' 一起使用
    猜你喜欢
    • 1970-01-01
    • 2013-02-04
    • 2013-10-31
    • 2013-08-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多