添加到输入敲除js的列表答案

【问题标题】：Add to list on enter knockoutjs添加到输入敲除js的列表
【发布时间】：2012-09-06 20:56:32
【问题描述】：

按回车后我无法获取要添加到列表中的名称，但单击“添加名称”时它仍然会添加。有什么想法吗？

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

【问题讨论】：

【解决方案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，后者更适合通用作品的名称。

【讨论】：

很棒的自定义处理程序！感谢分享 - 节省了我的时间！

【解决方案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/

【讨论】：

【解决方案3】：

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

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

将value.call(this); 更改为value.call(ko.dataFor(this));

【讨论】：

【解决方案4】：

这样试试

http://jsfiddle.net/KDz6E/

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

【讨论】：

【解决方案5】：

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

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

希望对你有帮助。

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

【讨论】：