骨干形式,逃脱

时间:2013-07-29 10:49:08

标签: javascript backbone.js

我在网站的一个页面上开发了一个非常简单的Backbone应用程序,并且遇到了表单问题。

我有一个列表(项目集合),当我点击一个项目的名称时,它将被一个表单替换。

当我编辑名称并按回车它工作正常,但我找不到解决方案: - 如果我在页面上的任何其他位置按“esc”键或更好,请转义表单 - 当我按下回车键时保存我的项目,当我没有修改文本时。

现在,当我点击某个项目并加载表单时,我被迫更改名称,如果我想退出for,请按Enter键。

以下是我的编辑表格Backbone视图:

var EditForm = Backbone.View.extend({
    model: Item,
    template: _.template('<form>' +
        '<input name=name value="<%= name %>" />' +
        '</form>'),
    events: {
        submit: 'save'
    },
    save: function(e){
        e.preventDefault();
        var newName = this.$('input[name=name]').val();
        this.model.set({name: newName}); 
        this.model.save();
    },
    render: function(){
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});

如果有人已经实施,我会非常感谢有一个例子。

谢谢

1 个答案:

答案 0 :(得分:0)

您需要在视图上使用“keyup”处理程序并检查其处理程序中的键代码。如下所示:

//modify your events object like this
events:{
   submit: "save",
   "keyup": "checkAndHandleCancel"
}

//handler
checkAndHandleCancel: function(e){
 if (e.keyCode == 27) { 
  //handle your cancel action here
 } 
}

请注意,只有重点放在表单上才能使用。如果您需要处理全局“取消”,则需要在文档上使用类似的“keyup”处理程序,然后将该事件传播到您的视图。