Collection backbone.js not responding to .each

Question

I have something that should be very simple. I am creating a new collection, and I want to convey its visualization and add collection models to the page.

  get_results: function () {
     $ .getJson (this.url, function (response) {
         this.search_results = new Kitchon.Collections.searchList (response);
         console.log (this.search_results);
         this.search_results.each (this.render_match);
     }
 },
 render_match: function (model) {
     console.log (model)
 },

This returns an error

  Uncaught TypeError: undefined is not a function 

my collection has the usual structure

  _byCid: Object
 _byId: Object
 _onModelEvent: function () {[native code]}
 _removeReference: function () {[native code]}
 length: 7
 models: Array [7]
 __proto__: o

I tried many things, but the one thing that stuck out was maybe I had to go through this.search_results.models.each(this.render_match); , since this is an actual array, but if I do, I get Uncaught typeError: Object [object Object],[object Object],...

Answer 1

you lose the execution context when the callback function for each method is called

use _.bind(this.render_match, this) when passing the callback to make sure render_match has the correct context

and you got an error because you did not wrap the callback function for the getJson method. You should also use the bind underscore method.

You should read a little about javascript this and how to tame it - try here http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

The correct code should look something like this:

 get_results: function(){ $.getJSON(this.url, _.bind(function(response){ this.search_results = new Kitchon.Collections.searchList(response); console.log(this.search_results); this.search_results.each(_.bind(this.render_match, this)); }, this)); }, render_match: function(model){ console.log(model) }, 

Although from what I see, I assume that the code you showed here is either a model or a collection — it is processing the rendering of the view — you shouldn't! Models and collections are intended only for data storage and analysis - all rendering and application flow control should be performed in the view (controllers) using a router.

Answer 2

$.getJson changes the this link. Many methods in jquery do this, so this.render_match is null. You pass a null value to each and it fails.

To solve this problem, create a link to this (e.g. var _this = this; ) before $.getJson and use it instead of this . The code should look like this:

 get_results: function(){ var _this = this; $.getJson(this.url,function(response){ _this.search_results = new Kitchon.Collections.searchList(response); console.log(_this.search_results); _this.search_results.each(_this.render_match); } }, render_match: function(model){ console.log(model) }, 

Answer 3

Just take a hit (I don't know anything about Backbone.js), but this is not what you are looking for:

 $.each(this.search_results, function(index, value) { alert(index + ': ' + value); }); 

Good luck