12

knockoutjsとkeypressイベントのバインドについて少し助けが必要です。テキストボックス内からEnterキーを押すように、ノックアウトを接続しようとしています。したがって、ボタンをクリックするのと同じアクションを実行できます。説明するのは少し難しいですが、うまくいけば、このJsFiddleが私が達成しようとしていることを示してくれるでしょう。

http://jsfiddle.net/nbnML/8/

私が抱えている問題は、オブザーバブルの値が更新されていないことです。これは、フォーカスがテキストボックスから離れるまでオブザーバブルが更新されないことと関係があると思いますか？

この問題の解決策。

ありがとう！

4

2 に答える 2

38

1 つのオプションは、valueUpdate追加のバインドを使用して、キーを押すたびに強制的に更新することです。たとえば、次のようにします。

<input type="text" data-bind="value: InputValue, valueUpdate: 'afterkeydown', event: { keypress: RunSomethingKey }" />

それが目的でない場合は、実際にはハンドラーで要素の変更イベントを発生させたいと思うでしょう。たとえば、jQuery では、次のようにします$(event.target).change();。

ただし、これをカスタム バインディングに移動した方がよいでしょう。おそらく次のようなものです（おそらく valueAccessor() の結果が関数かどうかを確認する必要があります）：

ko.bindingHandlers.enterKey = {
    init: function(element, valueAccessor, allBindings, vm) {
        ko.utils.registerEventHandler(element, "keyup", function(event) {
            if (event.keyCode === 13) {
                ko.utils.triggerEvent(element, "change");
                valueAccessor().call(vm, vm); //set "this" to the data and also pass it as first arg, in case function has "this" bound
            }

            return true;
        });
    }         
};

更新されたサンプルは次のとおりです: http://jsfiddle.net/rniemeyer/nbnML/9/

于 2012-07-24T13:34:45.253 に答える
1

送信バインディングを軽視しないでください: http://knockoutjs.com/documentation/submit-binding.html

これにより、return キーがオブザーバブルを更新しないなどの IE 9/10 の問題に対処できます。これに気をつければ、キーコード 13 をインターセプトする必要はありません。

html:

<form data-bind="submit:RunSomething">
 <input type="text" data-bind="value: InputValue" />
 <input type="submit" value="test" />
 <div data-bind="text: InputValue" />
</form>

コード：

var ViewModel = function () {
    var self = this;
    self.InputValue = ko.observable('');

    self.RunSomething = function (ev) {
        window.alert(self.InputValue());
    }
}
ko.applyBindings(new ViewModel());

ここでこれを参照してください：

http://jsfiddle.net/jnewcomb/uw2WX/

于 2013-04-04T14:56:26.460 に答える