Question

我在我的项目中使用骨干j，我对视图产生了一些小小的困惑。

我有这2个观点。写完之后，我是否处于正确的道路上，我感到困惑。我怀疑的原因是代码看起来几乎相同，除了渲染视图的el和视图中使用的模板。

这种类型的代码会影响性能吗？我能优化吗？

码

Project.views.list = Backbone.View.extend({
    // The DOM Element associated with this view
    el: '.lists-section-content',
    itemView: function(x){
        return new Project.views.list(x);
    },
    // View constructor
    initialize: function(payload) {
        this.data = payload.data;
        this.colStr = payload.colStr;
        this.render();
    },
    events: {

    },
    render: function() {
        sb.renderXTemplate(this);
        return this;
    }
});

Answer 1

首先，您最好在树初始化的第一个元素处提供el值，否则所有视图都将尝试使用相同的DOM元素：

var myTreeRoot= new Project.views.list({
  el: '.lists-section-content',
  data: payload.data,
  colStr: payload.colStr
});

在此之后，您需要稍微修改初始化函数才能使用options argument的view constructor：

// View constructor
initialize: function(options) {
    this.data = options.data;
    this.colStr = options.colStr;
    this.render();
},

最后回答你的问题，不这样做不会影响性能。您只需跟踪父视图中的叶子视图并使用父视图删除它们，就需要避免内存泄漏。以下是清理示例（使用this.subViews数组收集的所有叶视图，并在父删除时删除）：

Project.views.list = Backbone.View.extend({
    // The DOM Element associated with this view
    itemView: function(x){
        var view = new Project.views.list(x)
        this.subViews.push(view)
        this.$('.item-container:first').append(view.el)
    },
    remove: function() {
        _.invoke(this.subViews, 'remove')
        return Backbone.View.prototype.remove.apply(this, arguments)
    },
    // View constructor
    initialize: function(options) {
        this.data = options.data;
        this.subViews = [];
        this.colStr = options.colStr;
        this.render();
    },
    render: function() {
        sb.renderXTemplate(this);
        return this;
    }
});

骨干视图优化

1 个答案: