CustomBinding Issue

by manzanotti

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<textarea data-bind="Br2Nl: modelValue" rows="5"></textarea>
<div data-bind="text: modelValue"></div>

CSS

.val { font-weight: bold; }
td, th { margin: 2px; padding: 2px; border: solid 1px black; }
th { background-color: #333; color: #fff; }

JavaScript

function Br2Nl(content)
{
    var response = new String(content);
    return response.replace(/<br \/>/g, "\r\n");
}

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);
        observable(transformed);
        $(element).val(transformed);
    }
};

var viewModel = {
    modelValue: ko.observable("value with <br />")
}

ko.applyBindings(viewModel);