Backbone.js的：为什么不是这个活动的约束？ [英] Backbone.js: Why isn't this event bound?

问题描述

我有一个简单的待办事项列表，以及所有被渲染为预期的，但是当我点击了编辑表单的提交按钮，提交表单（GET / todo_items），页面是一种只重载显示了编辑形成。 提交表单事件不被束缚，我想不通为什么。我缺少什么？

  App.Views.Edit = Backbone.View.extend（{
  事件：{
    提交表单：救
  }，
  初始化：功能（）{
    this.render（）;
  }，
  保存：功能（）{
    VAR自我=这一点;
    VAR味精= this.model.isNew（）？ 创建成功！ ：保存！';    this.model.save（{
      标题：这$（'[NAME =标题]'）VAL（）      成功：函数（模型，RESP）{
        的console.log（好）;
        新App.Views.Notice（{消息：消息}）;
        self.model =模型;
        self.render（）;
        self.delegateEvents（）;
        Backbone.history.saveLocation（'todo_items /+ model.id）;
        $（'＃edit_area）HTML（''）。
      }，
      错误：函数（）{
        的console.log（坏）;
        新App.Views.Error（）;
      }
    }）;    返回false;
  }，
  渲染：功能（）{
    $（'＃edit_area'）HTML（ich.edit_form（this.model.toJSON（）））;
  }
}）;
 

下面是编辑表单：

 ＆LT;脚本ID =edit_formTYPE =text / html的＆GT;
  ＆LT;形式为GT;
    ＆LT;标签=标题＆GT;标题：LT; /标签＆gt;
    ＆LT;输入名称=标题类型=文本VALUE ={{title}}的/＆GT;
    ＆LT;按钮和GT;保存＆LT; /按钮＆GT;
  ＆LT; /表及GT;
＆LT; / SCRIPT＆GT;
 

解决方案

骨干EL元件上使用delegateEvents。如果不指定厄尔尼诺或不使用EL来渲染你的看法，事件代表团将无法正常工作。而不是做的

  $（＃edit_area）
 

中渲染，把它作为构造函数中的厄尔尼诺选项：

 编辑=新App.Views.Edit（{EL：$（＃edit_area）}）
 

称其为this.el无处不在视图code，尤其是在你渲染。

I have a simple todo list, and all is rendering as expected, but when I click on the submit button in the edit form, the form is submitted (GET /todo_items), and the page is reloaded an only shows the edit form. The "submit form" event isn't being bound and I can't figure out why. What am I missing?

App.Views.Edit = Backbone.View.extend({
  events: {
    "submit form": "save"
  },
  initialize: function(){
    this.render();
  },
  save: function(){
    var self = this;
    var msg  = this.model.isNew() ? 'Successfully created!' : 'Saved!';

    this.model.save({
      title: this.$('[name=title]').val(),

      success: function(model, resp){
        console.log('good');
        new App.Views.Notice({message: msg});
        self.model = model;
        self.render();
        self.delegateEvents();
        Backbone.history.saveLocation('todo_items/'+ model.id);
        $('#edit_area').html('');
      },
      error: function(){
        console.log('bad');
        new App.Views.Error();
      }
    });

    return false;
  },
  render: function(){
    $('#edit_area').html(ich.edit_form(this.model.toJSON()));
  }
});

Here's the edit form:

<script id="edit_form" type="text/html">
  <form>
    <label for="title">Title:</label>
    <input name="title" type="text" value="{{title}}" />
    <button>Save</button>
  </form>
</script>

解决方案

Backbone uses delegateEvents on the el element. If you do not specify "el" or do not use "el" to render your view, the event delegation will not work. Instead of doing

$("#edit_area") 

within your render, pass it as the "el" option in the constructor:

edit = new App.Views.Edit({el: $("#edit_area")})

Refer to it as this.el everywhere in your view code, especially in your render.

这篇关于Backbone.js的：为什么不是这个活动的约束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！