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

Question

问题

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

代码

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

是否有使用自定义绑定更新/过滤可观察对象值的正确方法？

自定义绑定用法：

<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，并且浏览器无法从那里正确解析文件。添加了一个可用的外部参考。