change backbone model on the fly - backbone.js

Question

I have a list models like Product, Book, Phone some of them may inherit from another.
And I try to build a from to add different products, the form view should be changed according to the type chosen by user.
This is what have tried now:
var Product = Backbone.Model.extend({
defaults: {
name: null,
price: 0,
type: null, /** phone or book or something else*/
phoneColor: null,
phoneWeight: 0,
bookCategory: null,
bookAuthor: null
}
});
var ProductFormView = Backbone.View.extend({
..........
render: function () {
var type = this.model.get('type');
switch (type) {
case 'phone':............
break;
case 'book':.........
break;
}
return this;
}
});
Put all the attributes to the Product, and render the form according to different model type, live demo: http://jsfiddle.net/57ra37vg/
Even it works now, but I think this is a bad idea, in my opinion, the base class Product should not contain too many attributes. I'd like something like this:
var Product = Backbone.Model.extend({
defaults: {
name: null,
price: 0,
type: null, /** phone or book or something else*/
}
});
var Book = Product.extend({
defaults:{
bookAuthor:null,
bookCategory:null
}
});
var ProductView = Backbone.View.extend({
render:function(){}
});
var BookView = ProductView.extend({
render:function(){}
});
var PhoneView = ProductView.extend({
render:function(){}
});
Each sub product owns their attributes and views. With this kind of design, when user change the type of the product by select an option, if I can change the current model to another kind of model, then refresh the view.
But it seems that I can not change a instance of Book to Phone on the fly.
So how do you make the design?

Answer 1

It is good to have separate View and Model. In this problem, we can have FormView, which can contain product view. Instead of changing the model on the fly, every product view can have their model. I would go with this design.
var Product = Backbone.Model.extend({
defaults: {
name: null,
price: 0
}
});
var Book = Product.extend({
defaults:{
bookAuthor:null,
bookCategory:null
}
});
var Phone = Product.extend({
defaults:{
color:null,
weight:null
}
});
var ProductView = Backbone.View.extend({
render:function(){}
});
var BookView = ProductView.extend({
initialize: function(options) {
this.model = new Book(options);
},
render:function(){}
});
var PhoneView = ProductView.extend({
initialize: function(options) {
this.model = new Phone(options);
},
render:function(){}
});
var FormView = Backbone.View.extend({
tagName: 'form',
defaults: {
productView: null
},
events: {
'change select': 'type_change'
},
type_change: function () {
var productType = this.$el.find('select').val()
this.productView.remove();
this.productView = this.getProductView(productType);
this.productView.render();
},
getProductView(product) {
if(product == "book")
return new ProductView();
return new BookView();
}
});