Question

问题

我创建了一个自定义绑定，用 \ r \ n 替换 html br 出现在observable中，以便显示在textarea中。这对于值的初始显示是有效的，但是进一步更改显示的文本不会触发自定义绑定的更新功能。

代码

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

我最初的假设是问题是我实际上没有触发底层observable的更新，因此我修改了更新函数来这样做，但没有成功：

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

是否有使用自定义绑定更新/过滤observable值的正确方法？

自定义绑定用法：

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

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

可以观察到，当textarea的内容发生变化时，observable（下面的div）没有任何反应。但是，当'Br2Nl'自定义绑定被'value'绑定替换时，observable会更新。

最终解决方案： http://jsfiddle.net/bWHBU/5/

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

Answer 1

当文本区域中的文本发生更改时，您没有指示何时更新observable属性。试试这个：

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方法正确可能需要一些修补，但这应该是一个好的开始。

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

如何使用自定义绑定更新/过滤基础可观察值？

1 个答案: