I am doing a very simple Backbone app example and I keep getting a JS error message. I basically have two files:

  1. app.js

This file creates a Backbone.js app the appends a span from a template using data from a collection view to an already created div on the html file.

    /*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

This file just calls the jquery, backbone and other js libraries and also created the div container where the Backbone.js app from the previous file will append the data.

    <!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>

The error I get is the following:

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

没有正确的解决方案

其他提示

You use Backbone 0.3.3 but Collection.reset was introduced in Backbone 0.5. See the changelog for more information.

Either upgrade Backbone (0.9.9 at the moment) (and Underscore and jQuery while you're at it) or use Collection#refresh if you absolutely have to keep Backbone 0.3.3 (but you will probably trip other errors down the road).

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top