CODEWITHSUNDEEP
backbone.jsbackbone-views
3gwebtrain
3gwebtrain

Reputation: 15303

Backbone.js - custom collection not working

In the backbone.js, for the purpose of filtering the data, i am fetching by click the element. and i am saving the collection as newcollection. but i unable to get any data.

what is wrong with my code...

my code :

taskListPhraseI.collection = Backbone.Collection.extend({ // collection fetching
    model:taskListPhraseI.model,
    url : 'data/data.json',
  });

taskListPhraseI.allView = Backbone.View.extend({
    el:$('.boardHolder'),
    events:{
      'click span.green' : 'filterIt'
    },
    initialize:function(){
      var that = this;_.bindAll(this);
      this.collection = new taskListPhraseI.collection(); //initial stage i am fetching
      this.collection.fetch({success:that.render});

      this.on('change:filterType', this.setNewType); //on click trigger my custom method to get the collection again
      //this.on('reset:filterType', this.setNewType);
    },
    setNewType:function(){
      var newCollection = new taskListPhraseI.collection(); // my custom collection
      newCollection.fetch(); // fetching
      this.collection.reset(newCollection,{ silent: true }) // triggering rest
      var filterType = this.filterType,
            filtered = _.filter(this.collection.models, function (item) {
                return item.get("dueDays") === filterType;
            });
            console.log(newCollection.models); // not working... why?
            console.log(this.collection.models);// works

      this.collection.reset(filtered);
    },

or the way i am doing wrong.. to filter the collection

any one guide me a correct way of process... thanks in advance

Upvotes: 0

Views: 556

Answers (1)

Vitalii Petrychuk
Vitalii Petrychuk

Reputation: 14255

fetch is async. Execute your code after collection will be fetched

newCollection.fetch({context:this}).done(function() {
  // your code
})

Plus this is not correct reset method usage:

this.collection.reset(newCollection,{ silent: true })

Use this way:

this.collection.reset(newCollection.toJSON(), {silent:true})

EDIT (Added example)

HTML 

<button>change filter</button>

JS

var url1 = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=vpetrychuk&count=9'
var url2 = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=derickbailey&count=9'
var collection = new (Backbone.Collection.extend({
    url : url1,
    resetWithFilter : function(key, value) {
      var query = {};
      query[key] = value;
      this.reset(this.where(query));
    }
}));

// fetch initial data
collection.fetch({dataType:'jsonp'});

$(':button').on('click', function() {
  // change url and fetch another data
  collection.url = url2;
  collection.fetch({dataType:'jsonp'}).done(function(response) {
      console.log('items count before filter:', collection.length);
    // now reset collection with selected filter
    collection.resetWithFilter('id_str', '294429621640912896');
    console.log('items count after filter:', collection.length)
  });
});

Fiddle: http://jsfiddle.net/vpetrychuk/N4ZKm/

Upvotes: 2

Related Questions