javascript - Switch Case 渲染重用

Question

我有一个backbone.js应用程序，它在选择更改时会更改 subview 。问题是，当我更改的只是产品名称时，我基本上是在重复大量代码。

我有一个看起来像这样的 View :

var myView = Backbone.View.extend({

events: {
    "change .changeType" : "changeHomeType"
},

render: function () {

    this.$el.append( render("homes/home") );
    var homeBlueView = new CityHomeBlueView({
        el: $('.home-view:last')
    });
    homeBlueView.render();

    return this;
},

changeHomeType: function (e) {
    var homeType = $(e.currentTarget).val();

    var thisHome = $(e.currentTarget).closest(".home");

    switch (homeType) {
        case "Blue":
            var homeBlueView = new CityHomeBlueView({
                el: thisHome.find( $('.home-view') )
            });

            homeBlueView.render();
            break;

        case "Red":
            var homeRedView = new CityHomeRedView({
                el: thisHome.find( $('.home-view') )
            });

            homeRedView.render();
            break;

我继续渲染 subview (至少 20 个以上)，而我所做的只是更改颜色。有一个更好的方法吗？

Answer 1

我建议两种解决方案。

解决方案1:创建公共(public) subview 。推荐

您可以将自定义选项传递给Backbone.View

 var homeRedView = new CityHomeView({    //create instance of common Child View
     el: thisHome.find( $('.home-view') ),
     color : 'red'  // or 'blue'
 });

您可以在 subview 中通过this.options.color使用自定义选项

解决方案2:使用类属性。

var myView = Backbone.View.extend({

  changeHomeType: function (e) {
      var homeType = $(e.currentTarget).val();

      var thisHome = $(e.currentTarget).closest(".home");

      var homeView = new this.constructor.ChildClasses[thisHome]({ 
         el: thisHome.find( $('.home-view') )
      }); 

      homeRedView.render();

   }

}, {
    ChildClasses : {         //Class properties
        red : CityHomeRedView,
        blue : CityHomeBlueView
    }
})