Question

我将以下列方式继承视图

define('view1', ['backbone', 'jquery', 'subview1'], function(Backbone, $, subview1){
    var view1 = Backbone.View.extend({
        initialize: function() {
            //some code with subview1
        },
        function1: function(){
            //some code with subview1
        }
    });
    return view1;
}

和子视图

define('view2', ['backbone', 'jquery', 'view1', 'subview2'], function(Backbone, $, view1, subview2){
    var view2 = view1.extend({
        initialize: function(e) {
            view1.prototype.initialize.apply(this, [e]);
        }
    });
    return view2;
}

我可以在子视图中以某种方式使用subview2而不是subview1，还是需要重写手动使用的所有函数？重要的是， view1 无法更改，因为作为第三方库提供。

Answer 1

最简单的方法是构建具有可扩展性的view1。如果您将子视图存储在原型中：

var view1 = Backbone.View.extend({
    //...
    subview: subview1
});

然后view1可以引用this.subview而不是subview1，子类可以通过原型覆盖subview属性：

var view2 = view1.extend({
    //...
    subview: subview2
});

一切都会按预期工作。

例如：https://jsfiddle.net/ambiguous/ra52ssm4/

Answer 2

您可以使用工厂方法模式。您将分离代码以将subView创建为方法，然后在子类中重写该方法。那么你不应该复制你的其他逻辑。

var SubView1 = Backbone.View.extend({
  render: function() {
    this.$el.html('<h1>SubView 1</h1>');
    return this;
  }
});

var SubView2 = Backbone.View.extend({
  render: function() {
    this.$el.html('<h1>SubView 2</h1>');
    return this;
  }
});

var View1 = Backbone.View.extend({
  render: function() {
    var view = this.createSubView();
    this.$el.append(view.render().el);

    return this;
  },

  createSubView: function() {
    return new SubView1();
  }
});

var View2 = View1.extend({
  createSubView: function() {
    return new SubView2();
  }
});

在backbone.js中的继承视图中更改已定义的参数

2 个答案: