DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

backbone error while trying to reset a collection

StackOverflow https://stackoverflow.com/questions/14277097

Question

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

No correct solution

OTHER TIPS

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).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow