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

问题

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

代码

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

是否有合适的方法使用自定义绑定更新/过滤可观测值

自定义绑定用法：

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

这是它的小提琴：

可以观察到，当textarea的内容发生变化时，observable（下面的div）不会发生任何变化。但是，当“Br2Nl”自定义绑定替换为“value”绑定时，可观察对象将被更新

此处的最终解决方案：

---

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

当文本区域中的文本发生变化时，您没有指示knockout何时更新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方法正确，但这应该是一个良好的开端

---

更新了你的。您正在为映射插件引用raw.github，浏览器无法从中正确解析文件。添加了一个可用的外部引用。

该值最初在哪里更改？@PaulManzotti该值是从AJAX响应初始化的，但是如何更改该值？这是另一个ajax调用吗？你是如何更新视图模型中的值的？@PaulManzotti这就是我所指的。一个ajax调用，用于从服务器提取对象并在JS中更新其响应模型。例如：ViewModel.Property（ObjectModel.Property）；我的意思是，定制绑定更新方法只会在您更新它绑定到的可观察属性时触发。你能给我看一下代码吗。在我看来，您的问题很好，所以这可能是您代码的另一部分中的问题。在此处为其创建了JSFIDLE:。问题是，现在文本区域中不显示初始可观察值。谢谢。但是，当我更改textarea的内容时，视图模型属性仍然没有得到更新。我会设法弄明白的。。。

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