Question

我有一个backbone.js应用程序，在选择更改时，更改子视图。问题是，当我改变所有产品名称时，我基本上会复制很多代码。

我的观点如下：

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;

我继续渲染子视图（至少还有20个），而我改变的只是颜色。有一个更好的方法吗？

Answer 1

我建议两种解决方案。

解决方案1：创建公共子视图。 推荐

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

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

您可以在子视图中使用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
    }
})

切换案例渲染重用

1 个答案: