Javascript 在页面中插入后需要运行的主干视图相关代码放在何处

根据我对Backbone.js的使用方式的理解，视图应该在它们自己的

$el

元素中呈现，该元素不一定附加到页面上。如果是这样，他们所依赖的更高级别视图通常负责在页面中插入

$el

我是在读了这本书之后作出这一声明的。在这种情况下，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);
  },

---

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

---

您是否会创建子级视图在插入后应调用的

afterInsertion（）

方法，是否会将代码放置在插入发生的位置（即在子级视图中），或者更改视图的工作方式，使其直接在页面中呈现？我肯定还有其他的解决办法我现在想不出来。我想知道，你认为最好的做法是什么？最好的做法是用骨干的方式工作，或者这个问题没有解释原因。

< P>我跟踪我的子视图。在基本视图定义中，创建

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);      

    }

});

有了它，您可以跟踪您的子视图，并在以后使用它们制作任何您想要的东西。 如果您想使事情“自动”，可以在渲染方法执行此操作后触发

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);

    }

};

有了这个，你已经可以做很多了

请记住，触发

ready

时不会绘制DOM。因此，如果您想对子视图高度或任何需要绘制DOM的内容进行任何计算，请使用

setTimeout（function（）{…}，0）

将代码放在队列的末尾

---

希望我能帮上忙。

CSS是您的解决方案。主干视图的元素可以有CSS类。在插入视图后，CSS将负责适当地定位元素。这就是你问题的答案吗？不幸的是，我不这么认为。在我的特殊情况下，我有一个bootstrap3粘贴头（当您滚动经过它时，它会变成固定顶部）。标头由我的AppView附加到页面，但我需要定义标头转换为固定断点的断点的像素值。在将元素插入页面之前，我无法知道它的位置，因为它的像素位置会根据用户的视口而变化。对于固定元素，您可以将元素插入任意位置，并将元素定位到所有窗口。例如：-$（body）.append（appView.$el）；如果元素是固定位置，则只会工作。

$（'#header'）.attr（'data-offset-top'，$（'#header'）.offset（）.top）

是我需要运行的代码行。如果未在页面中插入标题，则

$（'#header'）.offset（）.top

没有意义，因此需要在插入后运行代码。我的最终解决方案是在插入所有内容时让主视图发送自定义事件，并让组件视图订阅此事件。。。