изменение скелетной модели на лету

Question

У меня есть список моделей, таких как Product, Book, Phone Некоторые из них могут наследовать от другого.

И я пытаюсь построить a для добавления разных продуктов, вид формы должен быть изменен в соответствии с типом, выбранным пользователем.

Это то, что попытались в настоящее время:

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; 
     } 
    }); 

Поместите все атрибуты в Product и визуализации формы в зависимости от различных типов моделей, живой демо: http://jsfiddle.net/57ra37vg/

Даже сейчас работает, но Я думаю, что это плохая идея, на мой взгляд, базовый класс Product не должен содержать слишком много атрибутов. Я хотел бы что-то вроде этого:

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(){} 
    }); 

Каждый субпродукт владеет их атрибутами и видами. При таком дизайне, когда пользователь меняет тип продукта, выбирая опцию, если я могу изменить текущую модель на другую модель, а затем обновить представление.

Но, похоже, я не могу изменить экземпляр Book на Phone на лету.

Итак, как вы делаете дизайн?

Answer 1

Хорошо иметь отдельный вид и модель. В этой задаче мы можем иметь FormView, который может содержать представление продукта. Вместо того, чтобы менять модель «на лету», каждый вид продукта может иметь свою модель. Я бы пошел с этим дизайном.

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(); 
     } 
});