How To Update/filter The Underlying Observable Value Using A Custom Binding?

Problem 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

Solution 1:

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

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

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.