如何更新自定义绑定中的observable？

Question

我有一个简单逻辑的绑定处理程序,我将在其中更新observable,以便它将在视图中更新自己.

这是一个示例,其中一切都按预期工作

我的看法 :

<input data-bind="value: name" />
<hr/>
<div data-bind="fadeInText: name"></div>

代码:

ko.bindingHandlers.fadeInText = {
    update: function(element, valueAccessor) {
        ko.bindingHandlers.text.update(element,valueAccessor);//text becoz its binded to div
    } 
};

在这里,我试图做这样的事情(下面),我被困在这里 updating a observable

我的看法 :

<input data-bind="value: name" />
<hr/>
<input type="text" data-bind="fadeInText: name" />
<div data-bind="text:ko.toJSON($data)"></div>

码:

ko.bindingHandlers.fadeInText = {
    update: function(element, valueAccessor) {
            var value = valueAccessor();
    ko.bindingHandlers.value.update(element,valueAccessor);
    $(element).change(function () {
            value($(element).fadeInText('get'));
        });
    } 
};

在这个给定的场景中,当我更新textbox-1中的值然后textbox-2值正在更新时,有两个文本框.

但是当我尝试更新textbox-2值时没有任何更新我感觉如此接近但是现在我无法解决这个问题.

我看到检查过的镀铬控制台Uncaught TypeError: undefined is not a function但fadeInText存在于绑定中

更新:

我试过allBindingsAccessor().fadeInText()每次都得到旧值而不是新输入的值.

提琴手在这里提供

有一些东西以相同的方式完成,但它的工作小提琴在这里.

对这个的任何帮助都很棒.

Answer 1

如果要包装value绑定,还必须调用它init:

ko.bindingHandlers.fadeInText = {
    init: function(element, valueAccessor, allBindings) {
        ko.bindingHandlers.value.init(element,valueAccessor, allBindings);
    },
    update: function(element, valueAccessor) {  
       var value = valueAccessor();
       ko.bindingHandlers.value.update(element,valueAccessor);
    } 
};

工作小提琴.

原因如下:fadeInText当name可观察的更改时,会自动调用更新处理程序- 在update处理程序中访问它会注册它.所以双向绑定的一半 - 可观察到输入字段 - 起作用.

对于双向绑定的另一半 - 输入字段为observable - 您需要调用绑定的init处理程序value,因为这是value设置事件处理程序,以便在输入字段更改时通知它.

作为一个粗略的经验法则,您可以使用init自定义绑定的一部分来代替在HTML元素发生更改时更改observable的代码(例如,通过附加事件处理程序),以及update在observable发生更改时更改HTML元素的部分.