如何使用自定義綁定更新/過濾基礎可觀察值？

Question

問題

我創建了一個自定義綁定，用\\ r \\ n替換observable中的html br出現 ，以便在textarea中顯示。 這適用於初始顯示值，但進一步更改顯示的文本不會觸發自定義綁定的更新功能。

碼

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

有沒有一種正確的方法來使用自定義綁定更新/過濾observable的值？

自定義綁定用法：

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

這是它的小提琴： http ： //jsfiddle.net/bWHBU/

正如可以觀察到的那樣，當textarea的內容發生變化時，觀察者（下面的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作為映射插件，瀏覽器無法正確解析文件。 添加了可用的外部參考。