jquery - Backbone JS View Events not Firing? -
i'm trying play around backbone js , far seems making sense , working smoothly.
however code below, custom events not seem firing. in below code stand out why might be? need "initialize" in view? other pointers on code/structure cool well. below full js/html.
js
var todo = backbone.model.extend({}); var todocollection = backbone.collection.extend({ model: todo, url: '/home/todos' }); var appview = backbone.view.extend({ // should listen, required? el: $(".content"), events: { "keypress #new-todo": "enter" }, initialize: function () { // _.bindall(this, "render", "createonenter"); // this.collection.bind("all", this.render); }, hi: function () { alert('ohai'); }, render: function () { var lis = ''; $.each(this.collection.models, function () { lis += '<li>' + this.get('text') + '</li>'; }); $('#todo-list').append(lis); return this.el; }, enter: function (e) { alert('hi'); } }); var todocontroller = backbone.controller.extend({ routes: { "": "todos" }, initialize: function (options) { }, todos: function () { var todolist = new todocollection(); todolist.fetch({ success: function (data) { var appview = new appview({ collection: data }); appview.render(); } }); } }); $(function () { window.app = new todocontroller(); backbone.history.start(); }); html
<div id="todoapp"> <div class="content"> <input id="new-todo" placeholder="what needs done?" type="text" /> <div id="todos"> <ul id="todo-list"> </ul> </div> <a href="#">say hey</a> </div> </div>
el: $(".content") try this:
var appview = new appview({ el:$(".content"), collection: data }); you cannot call jquery there because dom not yet created. must when view loaded either example or in initialize.
Comments
Post a Comment