javascript - 页面中插入后需要运行的Backbone View相关代码放在什么位置

Question

根据我对 Backbone.js 预期使用方式的理解， View 应该在它们自己的 $el 元素中呈现，该元素不一定附加到页面。如果是这样，它们所依赖的更高级别的 View 通常会负责在页面中插入 $el。

我在阅读 Todo sample application 后发表此声明.在这种情况下，TodoView 在未附加到页面的默认 div 元素中呈现元素。

var TodoView = Backbone.View.extend({
  // [...]
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.$el.toggleClass('done', this.model.get('done'));
    this.input = this.$('.edit');
    return this;
  },

在创建 Todo 后，AppView 负责创建 TodoView 并在呈现后将其 $el 附加到页面。

var AppView = Backbone.View.extend({
  // [...]
  addOne: function(todo) {
    var view = new TodoView({model: todo});
    this.$("#todo-list").append(view.render().$el);
  },

---

我的问题是:如果未附加到页面的 View 需要在插入后 进行调整(例如计算其在视口(viewport)中的位置并相应地执行 DOM 操作)，您会将相应的代码放在哪里？

你会创建一个 afterInsertion() 方法让 subview 在插入后调用，你会把代码放在插入发生的相同位置(即在 subview 中)还是你会改变 View 的工作方式让它直接在页面中呈现吗？我敢肯定还有其他我现在想不到的解决方案。我想知道您认为什么是 Backbone 工作方式的最佳实践/优化，或者如果这个问题没有意义来解释原因。

Answer 1

我会跟踪我的 subview 。在基本 View 定义中，创建一个 add 方法:

var BaseView = Backbone.View.extend({ 

    // It is really simplified... add the details you find necessary
    add: function (name, viewDef, options) {

        options = options || {};

        if (!this.children)
            this.children = {};

        var view = new viewDef(options);

        this.children[name] = view;
        this.listenToOnce(view, 'ready', this.onSubViewReady);

        view.render(options);
        view.$el.appendTo(options.appendTo || this.$el);      

    }

});

有了它，您可以跟踪您的 subview ，并在以后用它们做任何您想做的事情。如果你想让事情变得“自动”，你可以在你的渲染方法之后触发一个 ready 事件:

var extend = BaseView.extend;

BaseView.extend = function (protoProps, staticProps) {

    var child = extend.apply(this, arguments);

    child.prototype.__render__ = protoProps['render'] || this.prototype.__render__ || function() {};

    child.prototype.render = function () {

        this.__render__.apply(this, arguments);

        this.trigger('ready', this);

    }

};

有了它，您已经可以做很多事情了。

请记住，DOM 不会在 ready 被触发时绘制。因此，如果您愿意对 subview 高度或需要绘制 DOM 的任何内容进行任何计算，请使用 setTimeout(function () { ... }, 0) 将您的代码放入队列结束。

希望我帮到了你。