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

选中的Chrome控制台我看到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处理程序中访问它会注册它。所以双向绑定的一半 - 可观察到输入字段 - 起作用。

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

作为一个粗略的经验法则，您可以将自定义绑定的init部分用于在HTML元素发生更改时更改observable的代码（例如，通过附加事件处理程序），以及{{1}部分在observable发生变化时更改HTML元素。

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

1 个答案: