如何更新自定义绑定中的可观察性？

Question

我有一个具有简单逻辑的绑定处理程序，在其中我将更新可观察到的，因此它将在视图中更新自己。

这是一个示例，所有的事情都如预期的那样工作。

My View :

<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

My view :

<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()，每次都得到旧的价值，而不是新的输入。

Fiddler提供here

有同样的方法做，但它的工作fiddler here。

在这个问题上任何帮助都是很好的。

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

工作fiddle。

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

对于双向绑定的另一半--输入字段是可观察的--您需要调用value绑定的value处理程序，因为这是value设置事件处理程序的地方，以便在输入字段更改时通知它。

作为一个粗略的经验规则，您可以使用自定义绑定的init部分，用于在HTML元素发生更改时更改可观察到的代码(例如，通过附加事件处理程序)，并在可观察到的元素发生更改时使用update部分来更改HTML。