0

问题

我创建了一个自定义绑定，它用\r\n替换observable 中的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' 绑定时，可观察对象会更新。

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

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

4

1 回答 1

2

当文本区域中的文本发生更改时，您还没有指示敲除何时更新可观察属性。尝试这个：

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

于 2013-03-27T12:36:20.703 回答