javascript - Backbone.js: Why isn't this event bound? -
i have simple todo list, , rendering expected, when click on submit button in edit form, form submitted (get /todo_items), , page reloaded shows edit form. "submit form" event isn't being bound , can't figure out why. 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 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 el element. if not specify "el" or not use "el" render view, event delegation not work. instead of doing
$("#edit_area")
within render, pass "el" option in constructor:
edit = new app.views.edit({el: $("#edit_area")})
refer this.el everywhere in view code, in render.
Comments
Post a Comment