2013-01-11 23 views
0

我正在做一个非常简单的Backbone应用程序示例,并且不断收到JS错误消息。我基本上有两个文件:尝试重置集合时的主干错误

  1. app.js

此文件创建一个应用程式Backbone.js的使用数据从一个集合视图已经创建的DIV的HTML模板中附加了一个跨度文件。

/*Backbone.js Appointments App*/ 

    App = (function($){ 
     //Create Appointment Model 
     var Appointment = Backbone.Model.extend({}); 

     //Create Appointments Collection 
     var Appointments = Backbone.Collection.extend({ 
     model: Appointment 
     }); 

     //Instantiate Appointments Collection 
     var appointmentList = new Appointments(); 
     appointmentList.reset(
     [{startDate: '2013-01-11', title: 'First Appointment', description: 'None', id: 1}, 
     {startDate: '2013-02-21', title: 'Second Appointment', description: 'None', id: 2}, 
     {startDate: '2013-02-26', title: 'Third Appointment', description: 'None', id: 3} 
     ] 
    ); 

     //Create Appointment View 
     var AppointmentView = Backbone.View.extend({ 
     template: _.template(
      '<span class="appointment" title="<%= description %>">' + 
      ' <span class="title"><%= title %></span>' + 
      ' <span class="delete">X</span>' + 
      '</span>' 
     ), 

     initialize: function(options) { 
      this.container = $('#container'); 
     }, 

     render: function() { 
      $(this.el).html(this.template(this.model)); 
      this.container.append(this.el); 
      return this; 
     } 
     }); 

     var self = {}; 
     self.start = function(){ 
     new AppointmentView({collection: appointmentList}).render(); 
     }; 
     return self; 
    }); 

    $(function(){ 
     new App(jQuery).start(); 
    }); 
  1. 的index.html

这个文件只是调用了jQuery,骨干网和其他JS库,并创建div容器,其中从以前的文件中的Backbone.js的应用程序将追加数据。

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <title>hello-backbonejs</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
     <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> 
     <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script> 
     <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> 
     <script src="app.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <div id="container"></div> 
    </body> 
    </html> 

我得到的错误是:

Uncaught TypeError: Object [object Object] has no method 'reset' app.js:14 
App app.js:14 
(anonymous function) app.js:49 
e.resolveWith jquery.min.js:16 
e.extend.ready jquery.min.js:16 
c.addEventListener.z jquery.min.js:16 

回答

2

您使用骨干0.3.3但Collection.reset在骨干网引入的0.5。有关更多信息,请参阅changelog

要么升级Backbone(0.9.9目前)(或Underscore和jQuery,而你在它)或使用Collection#refresh如果你绝对必须保持Backbone 0.3.3(但你可能会绊倒其他错误路)。