0

問題

テキストエリアに表示するために、オブザーバブル内のhtmlbrオカレンスを\ 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");
}

私の最初の仮定は、問題は、基になるオブザーバブルの更新を実際にトリガーしなかったため、更新関数を変更してトリガーしないことでしたが、成功しませんでした。

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」バインディングに置き換えられると、observableが更新されます。

ここでの最終的な解決策：http： //jsfiddle.net/bWHBU/5/

Firefoxでの垂直スクロールバーの再配置の問題を回避するために、「keyup」を「change」イベントに置き換えました。

4

1 に答える 1

2

テキスト領域のテキストが変更されたときに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);
    }
};

キーアップ方法を正しくするために少し手を加える必要があるかもしれませんが、それは良いスタートになるはずです。

jsFiddleを更新しました。マッピングプラグインとしてraw.githubを参照していたため、ブラウザーはそこからファイルを正しく解析できません。使用可能な外部参照を追加しました。

于 2013-03-27T12:36:20.703 に答える