Question

I would like to have a view that is extended to several other views depending on the type of the model.

var AnimalView = Backbone.View.extend({.....});
var DogView = AnimalView.extend({......});
var CatView = AnimalView.extend({.....});

But what I’d really like to do is have the AnimalView determine which species results:

var AnimalView = Backbone.View.extend({
 initialize : function(){
  if (this.model.get("species")=="dog"){this = new DogView({model:this.model});}
  if (this.model.get("species")=="cat"){this = new CatView({model:this.model});}   
 })
});

I realize this doesn’t work but it’s the idea that I would like to have.

I could do this :

if (pet.get("species")=="dog"){petVeiw = new DogView({model:pet})}
else if (pet.get("species")=="cat"){petVeiw = new CatView({model:pet})}

But I would like to isolate that logic in the parent view, namely AnimalView.

Any ideas on the best way to get this done?

Answer 1

I can’t think of a case where I see that pattern really. I’d say it’s much more common to see some kind of factory class is responsible for taking an object and deciding which other class to create to go with that object. But I don’t think it would be a parent class that would do that. It would typically be some other object that was just responsible for that mapping operation.

So while there might be a hierarchy of:

AnimalView
     |
     +-- DogView
     |
     +-- CatView

another object would generate the appropriate one (obviously bad pseudo description):

AnimalFactory
     AnimalView getViewForAnimal(animal)

Backbone would definitely allow you to create a DogView and CatView that both inherited behavior from an AnimalView. Perhaps sharing a common el that they both map to, common events that are mapped, and they just use different templates or something. I just wouldn’t expect the parent class to be the one to do the instantiation of the sub-classes.