如何使用自定义绑定更新/过滤基础可观察值? [英] How to update/filter the underlying observable value using a custom binding?

问题描述

问题

我创建了一个自定义绑定，用 \ r \ n 替换了可观察的 html br 事件，以便在文本区域中显示.对于值的初始显示，此操作正常，但对显示的文本进行的进一步更改不会触发自定义绑定的更新功能.

I have created a custom binding that replaces html br occurences in an observable with \r\n in order to be displayed in a textarea. This works OK for the initial display of the value, but furthers changes to the displayed text don't trigger the update function of the custom binding.

代码

ko.bindingHandlers.Br2Nl = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {     
        var observable = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(observable);
        var transformed = Br2Nl(valueUnwrapped);
        $(element).val(transformed);
    }
};
function Br2Nl(content)
{
    var response = new String(content);
    return response.replace(/<br \/>/g, "\r\n");
}

我最初的假设是问题是我实际上没有触发底层可观察对象的更新，因此我修改了update函数来这样做，但是没有成功:

My initial assumption was that the problem was that I didn't actually trigger the update of the underlying observable so I modified the update function to do so, but with no success:

update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {     
        var observable = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(observable);
        var transformed = Br2Nl(valueUnwrapped);
        //update observable with transformed value
        observable(transformed);
        $(element).val(transformed);
    }

是否存在使用自定义绑定更新/过滤可观察值的正确方法?

Is there a proper way to update/filter the value of an observable using a custom binding?

自定义绑定用法:

<textarea data-bind="Br2Nl: PropertyName" rows="5">  </textarea>

这是它的小提琴: http://jsfiddle.net/bWHBU/

可以观察到，当文本区域的内容发生变化时，可观察对象(下一个div)没有任何反应.但是，当将"Br2N1"自定义绑定替换为值"绑定时，可观察对象将被更新.

As it can be observed, nothing happens to the observable(div below) when the content of the textarea changes. However, when the 'Br2Nl' custom binding is replaced with the 'value' binding, the observable is updated.

此处的最终解决方案: http://jsfiddle.net/bWHBU/5/

将'keyup'替换为'change'事件，以避免在Firefox上垂直滚动条重新定位.

Replaced 'keyup' with 'change' event to avoid vertical scrollbar repositioning issue on Firefox.

推荐答案

当文本区域中的文本发生更改时，您尚未指示删除何时更新observable属性.试试这个:

You have not instructed knockout when to update the observable property when the text in the text area changes. Try this:

ko.bindingHandlers.Br2Nl = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.utils.registerEventHandler(element, "keyup", function() {
            var observable = valueAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(observable);    
            var transformed = Br2Nl($(element).val());
            observable(transformed);
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {     
        var observable = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(observable);
        var transformed = Br2Nl(valueUnwrapped);
        $(element).val(transformed);
    }
};

正确设置keyup方法可能需要一些修补，但这应该是一个好的开始.

It might take a bit of tinkering to get the keyup method correct, but that should be a good start.

更新了您的 jsFiddle .您在为映射插件引用raw.github，浏览器无法正确地从那里解析文件.添加了可用的外部参考.

Updated your jsFiddle. You were referencing raw.github for the mapping plugin, and browsers can't parse files from there correctly. Added a usable external reference.

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