尝试重置集合时出现主干错误

时间:2013-01-11 11:20:08

标签: javascript backbone.js

我正在做一个非常简单的Backbone应用程序示例,我不断收到JS错误消息。我基本上有两个文件:

  1. app.js
  2. 此文件创建一个Backbone.js应用程序,使用集合视图中的数据将模板中的跨度附加到html文件上已创建的div。

        /*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
    2. 此文件只调用jquery,backbone和其他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
      

1 个答案:

答案 0 :(得分:2)

您使用Backbone 0.3.3但在Backbone 0.5中引入了Collection.reset。有关详细信息,请参阅changelog

要么升级Backbone(目前为0.9.9)(还有Underscore和jQuery)或使用Collection#refresh如果你必须保持Backbone 0.3.3(但你可能会去其他地方)在路上的错误。)