Backbone.js - is it possible to define multiple el values for a model?

Question

I would like to define the model and el properties of a SearchApp (which extends Backbone.view) so as to search within 3 distinct ElasticSearch indices. However, I would like each of these results to be displayed into separate divs, a distinct one for each model. What I have now is:

var searchApp = new SearchApp({model: [searchModel1, searchModel2, searchModel3], el: $("#results1")});

but what I would ideally want to have is

var searchApp = new SearchApp({model: [searchModel1, searchModel2, searchModel3], el: [$("#results1"),$("#results2"),$("#results3")]});

so that the data returned by searchModel1 is displayed inside div results1, the data returned by searchModel2 is displayed inside div results2, and the data returned by searchModel3 is displayed inside div results3. However, this is not working for me, I cannot define el with a list. Is there any workaround for this, or is this even possible? Many thanks!

Answer 1

Out of the box it will not work and is wrong, but a work around and a bit more correct way is this.

Instead of using model: use collection: and wrap it into new Backbone.Collection

skip use of default el and pass it as result placeholder and then use it when rendering

var searchApp = new SearchApp({collection: new Backbone.Collection([searchModel1, searchModel2, searchModel3]), placeholders: [$("#results1"),$("#results2"),$("#results3")]});


SearchApp = Bb.View.extends({
initialize: function (options) {
   this.placeholders = options.placeholders
}
render: function() {
    //for each this.placeholders render searchModel (event better wrap it in new view)
}

});

However this way your searchApp actually becomes not a view but a manager of some instance.

I would suggest that each view should have its own model, my guess is that you already know how many search models and their view objects there will be. So just create a method that accepts your model and $ and creates you a view.

function(model, $el) {
return new SearchApp({model: model, $el: $el});
}

And then in that view listen when you get an search response and render accordingly.