Backbone search multiple-models

Question

I've been trying my hand at Backbone recently and have a very basic question.

I need to search for different kind of records and the search API returns a JSON response like

{ foo: 
  [
      { name: 'foo1', url: '/foo1' },
      { name: 'foo2', url: '/foo2' }
  ],
  bar:
  [ { name: 'bar1', url: '/bar1' } ],
  baz:
  [ { name: 'baz1', url: '/baz1' } ]
}

I have a backbone model for Foo, Bar and Baz. A collection which on fetch should hit my server and get me the search results. I attempted something like

window.searchEntities = Backbone.Collection.extend({
  url: '/get_search_results'

  model: function(attrs, options) {
    //Typecast the JSON to Foo, Bar and Baz Models
  });      
});

However, I do not know how to parse the results returned by server so that my collection holds models Foo, Bar and Baz? Or should I tweak the results returned by server so that its easier to handle this with Backbone?

I think you are just heading the way to the hell betting for this kind of architecture... In the other hand I see a lot of mismatches in your example code like for example your function is not returning any thing.. and I don't think any one is gonna send attrs and options to your Collection.model()... and even if you receive your JSON request as the attrs param this attrs['foo'] is not matching with any thing in your JSON example. Summarizing: I think you should rebuild your question to try to avoid confuse information. — fguillen
Thanks for pointing out the inconsistencies @fguillen. I have tried to simplify the question a bit. If you still feel I'm going totally wrong way about this, also pls let me know so I'll go back to the drawing board. — membLoper

fguillen fguillen · Accepted Answer · 2012-08-14T19:31:33

As I'm seeing your JSON is not returning 3 different Models but 3 different Collection due the 3 of them are containing Arrays.

I think you should start from the beginning, If I understood weel you want to return a bunch of Models of different type, let's say:

[
  {
    type: "Foo",
    name: "foo1",
    url: "/foo1"
  },

  {
    type: "Foo",
    name: "foo2",
    url: "/foo2"
  },

  {
    type: "Bar",
    name: "bar1",
    url: "/bar1"
  },

  {
    type: "Baz",
    name: "baz1",
    url: "/baz1"
  },
]

I see a Collection there, and also different Models of different types.

Now let's see the SearchCollection, I don't think you can play with the model property like you show in your example, so let's say all the Models has a common Model parent Result:

window.SearchEntities = Backbone.Collection.extend({
  url: '/get_search_results'

  model: Result  
});

From here we can do it simple and don't create sub-classes of Result if there is not a real need for it:

window.Result = Backbone.Model.extend({
  initialize: function(){
    this.url = this.get( "url" );
  }
});

And you're done:

var searchEntities = new window.SearchEntities();
searchEntities.fetch();

// ... wait for the fetch ends

searchEntities.at(0).get( "type" ); //=> "Foo"

Still I don't feel confortable by two reasons:

I don't see clear why you want to play with the Result.url.
Where are the ids of your Models? which are very important for Backbone.

Backbone search multiple-models

1 Answers