3

Knockout で、テキスト領域のコンテンツが変更されるたびに (文字ごとに) DIV を更新する、ページ上のテキスト領域と DIV の間に「ライブ」バインディングを設定することは可能ですか? ビュー モデルで計算フィールドを使用していますが、テキストエリアからタブで移動しない限り、DIV は更新されません。

コード

function EditModel() {
        this.CommentTextPlain = ko.observable("");

        var self = this;

        this.CommentReady = ko.computed(function () {
            return self.CommentTextPlain().replace(regex, "<BR>");
        });
    }

    function ApplyViewmodel() {
        model = new EditModel();
        ko.applyBindings(model, document.getElementById("mainContainer"));
    }

<div id="mainContainer">
    <div id="target" data-bind='html: CommentReady' class="commentEditBox"></div> 

    <textarea data-bind="value: CommentTextPlain" rows="20" cols="62" id="editBoxFull">    </textarea>

</div>
4

3 に答える 3

6

バインディングには、次のような追加のイベントを含めるように設定できるvalueというコンパニオンオプションがあります。valueUpdate

data-bind="value: CommentTextPlain, valueUpdate: 'afterkeydown'"
于 2013-03-07T19:03:46.040 に答える
2

valueUpdateバインディングを使用する

http://knockoutjs.com/documentation/value-binding.htmlの「 AdditionalParameters 」セクションを参照してください。

valueUpdate

バインディングにvalueUpdateというパラメーターも含まれている場合、これは、変更イベント以外の変更を検出するためにKOが使用する必要がある追加のブラウザーイベントを定義します。次の文字列値は、最も一般的に役立つ選択肢です。

  • 「keyup」-ユーザーがキーを離したときにビューモデルを更新します
  • 「keypress」-ユーザーがキーを入力すると、ビューモデルが更新されます。キーアップとは異なり、ユーザーがキーを押している間、これは繰り返し更新されます
  • 「afterkeydown」-ユーザーが文字の入力を開始するとすぐにビューモデルを更新します。これは、ブラウザのキーダウンイベントをキャッチし、イベントを非同期的に処理することで機能します。これらのオプションのうち、
  • ビューモデルをリアルタイムで更新したい場合は、「afterkeydown」が最適です。

これらのオプションのうち、ビューモデルをリアルタイムで更新したい場合は、「afterkeydown」が最適です。

于 2013-03-07T19:04:01.813 に答える
0

Knockout にはtextInput、値バインディングに追加のパラメーターを使用する必要なく、即時のモデル更新を実現するバインディングがあり、カット アンド ペーストおよびテキスト ドラッグ イベントも処理します。

textInput バインディング ドキュメントへのリンクは次のとおりです: http://knockoutjs.com/documentation/textinput-binding.html。

于 2015-02-23T23:28:23.707 に答える