如何更新自定义绑定中的可观察对象? [英] How can i update a observable in custom bindings?

问题描述

我有一个内部具有简单逻辑的绑定处理程序，我将在其中更新可观察对象，以便在视图中进行自我更新.

I am having a binding handler with simple logic inside where i will update the observable so it will update itself in view .

这是一个示例示例，其中所有操作均按预期进行

This i a sample case where everything works as expected

我的视图:

<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

Here I'm trying to do something like this(below) and i am stuck here 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的值正在更新时，有两个文本框.

In this given scenario there are two textboxes when i update a value in textbox-1 then textbox-2 value is getting updated .

但是当我尝试更新textbox-2的值时，什么也没有更新，我感觉非常接近，但是现在我无法破解.

But when i try to update textbox-2 value nothing gets updated i feel so close but for now i can't crack this up .

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

Checked chrome console i see Uncaught TypeError: undefined is not a function but fadeInText is present in binding

更新:

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

I tried allBindingsAccessor().fadeInText() i get the old value everytime not the new entered one .

提琴手提供了> 此处

Fiddler provided here

有一些方法可以完成，但是可以正常工作 这里的小提琴手 .

There is something with same way done but its working fiddler here.

对此的任何帮助都是很棒的.

Any help on this one is great .

推荐答案

如果要包装value绑定，还必须调用其init:

If you want to wrap the value binding, you must call its init as well:

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

正在工作小提琴.

这是为什么:当name可观察到的更改时，会自动调用您的fadeInText更新处理程序-在update处理程序中对其进行注册.因此，双向绑定的一半-在输入字段中可见-起作用.

Here's why: your fadeInText update handler is called automatically when the name observable changes - accessing it in the update handler registers it. So one half of the two-way binding — observable to input field — works.

对于双向绑定的另一半(可观察的输入字段)，您需要调用value绑定的init处理程序，因为这是value为其设置事件处理程序的地方输入字段更改时收到通知.

For the other half of the two-way binding — input field to observable — you need to call the init handler of the value binding, because that is where value sets up the event handler for it to be notified when the input field changes.

作为一个粗略的经验法则，您将自定义绑定的init部分用于代码，该代码在HTML元素发生更改时(例如，通过附加事件处理程序)更改了可观察的内容，并在update部分进行了更改可观察对象已更改时的HTML元素.

As a rough rule of thumb, you use the init part of a custom binding for the code that changes the observable when the HTML element has changed (e.g. by attaching event handlers), and the update part to change the HTML element when the observable has changed.

这篇关于如何更新自定义绑定中的可观察对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！