knockout.js - 如何更新自定义绑定(bind)中的 observable？

Question

我有一个带有简单逻辑的绑定(bind)处理程序，我将在其中更新 observable，以便它会在 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
我的看法:

<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存在于绑定(bind)中

更新:

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

fiddler 提供 here

有一些相同的方法完成但它的工作 fiddler here .

对此的任何帮助都很棒。

Answer 1

如果要包装 value绑定(bind)，你必须调用它的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 中访问它处理程序注册它。因此，双向绑定(bind)的一半——可观察到输入字段——有效。

对于双向绑定(bind)的另一半——输入字段到 observable——你需要调用 init value 的处理程序绑定(bind)，因为那是 value设置事件处理程序，以便在输入字段更改时通知它。

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