Question

以下是我所得到的：

ProductListView.js

define(['jquery', 'underscore', 'backbone', 'views/ProductView', 'views/PaginatorView'], function($, _, Backbone, ProductView, PaginatorView) {
    var ProductListView = Backbone.View.extend({
        className: 'productsList',
        initialize: function() {
            this.render();
        },
        render: function() {
            // some initialization
            // that's for zurb grid                
            this.$el.addClass('twelve columns');

            for(var i = startPos; i < endPos; i++) {
                this.$el.append(new ProductView({ model: products[i] }).render().el);
            }

            this.$el.append(new PaginatorView({ model: this.model, page: this.options.page }).render().el);
            // this.$el.after(new PaginatorView({ model: this.model, page: this.options.page }).render().el);
            return this;
        }
    });
    return ProductListView;
});

似乎我无法在this.$el之后插入内容。这条线

this.$el.after(new PaginatorView({ model: this.model, page: this.options.page }).render().el);

虽然可以将PaginatorView附加到（ProductListView）视图中，但似乎无法在其外部插入内容。

你遇到过类似的事吗？

Answer 1

this.$el.after会失败，因为调用render()时，this.$el尚未插入DOM（它只是一个悬空的div）。

Backbone鼓励您在插入之前等待视图的HTML内容准备就绪。这样，浏览器只重绘一次窗口，性能更好。

根据经验，您应该仅在Backbone视图中操作位于this.$el内的内容。

Answer 2

如果视图元素尚未添加到DOM（“已断开连接”），则在其上调用after()将不会更改元素或DOM。但是，它确实返回一个包含两个元素的集合，您可以将其分配给this.$el以便稍后添加它们。然而，我很确定这不是一个好习惯，因为View只与一个元素纠缠在一起。

在特定分割后无法插入内容。 Backbone.js的

2 个答案: