How do I change view when the value of my collection changes

Question

I created a simple backbone book library project, it has 1 model, view, collection. When I fetch the data from collection I'll process the JSON data and set the processed data into a variable in collection to show it in Google charts. How to listen to that processed variable change in Backbone ?

Here is my code

Model

var BookModel= Backbone.Model.extend({
    defaults:{
        id:'',
        name: '',
        author: ''
    }
});

Collection

var BookCollection= Backbone.Collection.extend({
    model: BookModel,

    initialize: function(){
        this.fetchData();
    },

    fetchData: function(){
        this.url= "/get/all_books";

        this.fetch({
            success: success_callback,
            error: error_callback
        })
    },

    success_callback: function(that, data){
        var chart_data=[];

        //Process logic goes here. chart_data has the data i need

        // I need to listen this.chart_data value change in view
        this.chart_data= chart_data;

    },

    error_callback: function(){

    }
});

View

var BookView= Backbone.View.extend({
    initialize: function(){
        this.collection= new BookCollection();
    } 

    drawChart: function(){
        //Google Chart Goes here, when ever the chart_data variable changes
    }
});

Please correct me if any of my code conventions are not good. Thank you

So you need to set up a change listener on your model. Here is a good article on some caveats to doing that. http://ozkatz.github.io/avoiding-common-backbonejs-pitfalls.html — Georgette Pincin, Sep 22 '15 at 19:02

score 0 · Answer 1 · answered Sep 22 '15 at 19:22

0

Your view should subscribe on the collection event via listenTo:

var BookView= Backbone.View.extend({
    initialize: function(){
        this.collection= new BookCollection();
        this.listenTo(this.collection, "add", this.someMethod);
    }
});

answered Sep 22 '15 at 19:22

Alexander Shlenchack

3,779
6
32
46

I don't want to listen to add event. I'll process the the json data then I need to listen to that processed data – testzuser Sep 22 '15 at 19:30
In Backbone collections have this events: add, remove, update, reset, sort, destroy. You can choose what you need. Also you can trigger an event with target name. – Alexander Shlenchack Sep 22 '15 at 19:34
if I use this.listenTo(this.collection, "add", this.someMethod); this.someMethod will call the size of my array times. But I need to process the data and need to listen to that processed data – testzuser Sep 22 '15 at 19:36
I think you have some wrong logic here. This: var chart_data=[]; ...; this.chart_data= chart_data; should belongs to the model level. You should create appropriate model and pass it to the collection. Collections should store only model items and perform on them. – Alexander Shlenchack Sep 22 '15 at 19:40
Thank you, then where should my business logic should go ? I mean I'll get array of objects from server. Where to write the process logic function ? View / Model ? – testzuser Sep 22 '15 at 19:44
Anywhere, but in the end you should get a target collection of models and subscribe on it's events. If you have some sorting logic you can create a base sorted collection and inherit it. For simplify you can perform simple logic in views. Personally I prefer to use views or route. – Alexander Shlenchack Sep 22 '15 at 19:53

score 0 · Answer 2 · edited May 23 '17 at 12:29

First of all, since you are not using the returned data to create any models, you should just use a model. Overriding the parse method allows you to return a manipulated attributes hash to be set on the model.

var BooksModel = Backbone.Model.extend({
  url: 'get/all_books',
  initialize: function() {
    this.fetch();
  },
  parse: function(resp) {
    var data = resp.map(function(dataItem) {
      // Do stuff with your data.
    });
    return data;
  }
});

Then you can create the model in your view and listen to any change events on it. When data in the model changes you draw the chart.

var BooksView = Backbone.View.extend({
  initialize: function(){
    this.model = new BooksModel();
    this.listenTo(this.model, 'change', this.drawChart);
  },
  drawChart: function(){
    var modelData = this.model.toJSON();
    //Google Chart Goes here, when ever the chart_data variable changes
  }
});

Wether or not to use collections instead of a single model with all of your data has been answered in your other question.

How do I change view when the value of my collection changes

2 Answers2