knockout.js - 添加到输入敲除js的列表

Question

按回车后，我无法将名称添加到列表中，但单击“添加名称”时仍会添加。有任何想法吗？

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

它避免了需要进行自定义绑定来捕获 keycode 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

像这样试试

http://jsfiddle.net/KDz6E/

基本上你的“自我”是一个 html 元素，而不是你的视图模型

Answer 4

这段代码的问题是 pushPeople() 中的 self.people 是未定义的（因为this指向输入元素而不是视图模型）。

试试这个：http: //jsfiddle.net/WWpcC/22/

改为value.call(this);_value.call(ko.dataFor(this));

Answer 5

其实你不需要任何自定义绑定，简单的事件就足够了！

我已经调整了你的例子。更新示例： JS FIDDLE

希望它会帮助你。

问候，德米特里·扎伊茨。