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

Question

我有一个带有简单逻辑的绑定处理程序，我将在其中更新可观察对象，以便它会在视图中更新自身。

这是一个示例，一切都按预期工作

我的观点：

<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 的值时，什么都没有更新，我感觉如此接近，但现在我无法解决这个问题。

检查了 chrome 控制台，我看到了 Uncaught TypeError: undefined is not a function，但 fadeInText 存在于绑定中

更新：

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

提琴手提供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绑定的init处理程序，因为这是value为其设置事件处理程序的地方输入字段更改时收到通知。

作为一个粗略的经验法则，您可以使用自定义绑定的 init 部分来更改 HTML 元素更改时可观察的代码（例如，通过附加事件处理程序），并使用 update 部分进行更改当 observable 发生变化时的 HTML 元素。