Page Getting Refreshed/reloaded Many Times

I am learning JavaScript and backbone.js and trying to develop one small web app. But the problem is that my page (graph) is getting reloaded many times (more than expected). So p

Solution 1:

You have bound the model's change event to the view's render method with this.model.on('change', this.render, this); this means for every change on model, view will re-render.

And you're passing model attributes directly to some Chart() function. We don't know what's going on inside it, but chances are it's updating model attributes many times as part of chart drawing and obviously each change causes another render which invokes the Chart() method again, which invokes the render and hence creates a render loop that is likely as long as the number of changes made to model by Chart() function.

Either remove this.model.on('change', this.render, this); or use model's toJSON() method to get a copy of it's data and pass it to chart() method for drawing. Use cases like this is the reason why toJSON() method exists.

---

Another issue is handling the asynchronous fetch, I think this.model.on('change', this.render, this); was your attempt to handle this, but it's wrong. Either you should listen to events such as sync instead, like

this.model.on('sync', this.render, this);

or do something like:

var ch = new dashboardModel.chart({});
/* ---------------------------^ this is the actual model constructor?
 Then what's dashboardModel?! Bad naming ;) */

ch.fetch({
  success: function(model, response) {
    new firstSubViewModel({
      el: '#chartAnchor1',
      model: ch
    });
  }
});

---

Apart from that you should not manually initialize models. It's a one time activity handled by Backbone.js and only one time initialization code should be added inside it. I can't even think of what you were trying to achieve by manually invoking initialize on an already initialized model.

To fetch data from your persistence layer you should be using fetch() method.

fetchModelData: function() {
  this.model.fetch({/* options */});
}

---

Your code in controller has many issues. It seems to try and fetch() a model with some data?, but fetch method only accepts options, mostly for customizing and handling the AJAX call like the ones I've used above (Maybe they were actually options but you named it data?! Ignore this one in that case).

Also there's a view hanging around with no references for cleanup, a direct reference to DOM via el option which will cause issues if you create another instance of firstSubViewModel, use of on instead of listenTo etc all leading to classic Backbone.js bugs like memory leaks, issues with events and such.

All those can't be handled in an answer so I suggest reading the docs properly and doing some research about common Backbone.js issues.

---

Side note: According to common naming conversion, firstSubViewModel should be FirstSubViewModel because it's a constructor.