knockout.js - enterknockoutjsのリストに追加

Question

Enterキーを押した後、リストに追加する名前を取得できませんが、[名前の追加]をクリックすると追加されます。何か案は？

http://jsfiddle.net/someyoungideas/WWpcC/

Answer 1

http://todomvc.com/architecture-examples/knockoutjs/をご覧ください

具体的には、http：//todomvc.com/architecture-examples/knockoutjs/js/app.js

var ENTER_KEY = 13;

// a custom binding to handle the enter key (could go in a separate library)
ko.bindingHandlers.enterKey = {
    init: function( element, valueAccessor, allBindingsAccessor, data ) {
        var wrappedHandler, newValueAccessor;

        // wrap the handler with a check for the enter key
        wrappedHandler = function( data, event ) {
            if ( event.keyCode === ENTER_KEY ) {
                valueAccessor().call( this, data, event );
            }
        };

        // create a valueAccessor with the options that we would want to pass to the event binding
        newValueAccessor = function() {
            return {
                keyup: wrappedHandler
            };
        };

        // call the real event binding's init function
        ko.bindingHandlers.event.init( element, newValueAccessor, allBindingsAccessor, data );
    }
};

この拡張機能はenterKeyと呼ばれ、一般的な部分に適した名前であるaddOnEnterではないことに注意してください。

Answer 2

サブミットバインディングについて考えてください http://knockoutjs.com/documentation/submit-binding.html

キーコード13をキャッチするためにカスタムバインディングを作成する必要がなくなります。また、valueUpdateは必要ありません。

html

<form data-bind="submit:pushPeople">
 <input type="text" data-bind="value: addPeople, valueUpdate: 'afterkeydown'"/>
 <input type="submit" value="Add Name" />
</form>

http://jsfiddle.net/jnewcomb/umf3f/1/

Answer 3

このコードの問題は、pushPeople（）のself.peopleが定義されていないことです（thisビューモデルではなく入力要素を指しているため）。

これを試してください：http：//jsfiddle.net/WWpcC/22/

に変更value.call(this);されましたvalue.call(ko.dataFor(this));

Answer 4

このようにしてみてください

http://jsfiddle.net/KDz6E/

基本的に、あなたの「自己」はHTML要素であり、ビューモデルではありませんでした

Answer 5

実際には、カスタムバインディングは必要ありません。単純なイベントで十分です！

私はあなたの例を調整しました。更新された例： JS FIDDLE

それがあなたを助けることを願っています。

よろしく、ドミトリーZaets。