我试图玩Backbone JS,到目前为止一切似乎都有意义,工作顺利。
但是使用下面的代码,我的自定义事件似乎没有发射。以下代码中的任何东西突出了为什么会是这样?我需要“初始化”视图中的任何东西吗?代码/结构上的任何其他指针也会很酷。下面是我的完整JS / HTML。
JS
var Todo = Backbone.Model.extend({}); var TodoCollection = Backbone.Collection.extend({ model: Todo,url: '/Home/Todos' }); var AppView = Backbone.View.extend({ // where it 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 to be done?" type="text" /> <div id="todos"> <ul id="todo-list"> </ul> </div> <a href="#">say hey</a> </div> </div>
解决方法
el: $(".content")
尝试这个:
var appview = new AppView({ el:$(".content"),collection: data });
你不能调用jQuery,因为DOM尚未创建。您必须在视图加载时作为我的示例或在初始化时执行。