Question

我有我的骨干路由器：

var AppRouter = Backbone.Router.extend({

    routes:{
        "" : "productos",
    },

    initialize: function(){
        this.productoItem = new Producto();
        //Crear la vista del detalle de un producto

        this.productoItems = new Productos();
        this.productoItems.fetch();

        this.productosView = new ProductsView({collection: this.productoItems});
    },

    productos: function(){
        $('#app').html(this.productosView.render().el);
      //this line seems not to working but putting in a console does the work
    }

});

/*********************************/
var app = new AppRouter();

$(function(){
    Backbone.history.start();
});

继承人的观点：

var ProductsView = Backbone.View.extend({

    render: function(){
        this.$el.html(Handlebars.templates.products(this.collection));
        return this;
    }
});

最后我的车把模板：

<h1>Y LOS MODELOS SON</h1>
<ul>
{{#each models}}
<li>
{{attributes.familia}}
</li>
{{/each}}
</ul>

因此，当我运行此应用程序时，它只会呈现Y LOS MODELOS SON，这意味着 $('#app').html(this.productosView.render().el);有效但不完全只有html标签...但是当我这样做时：

$('#app').html(app.productosView.render().el)

在控制台中它完美运作...... 有人能解释我，我错过了什么？感谢...

Answer 1

Collection#fetch是一个AJAX调用，因此在服务器发回任何内容之前调用AppRouter#productos。结果是，在调用ProductsView#render时，集合为空，模板中的{{#each models}}没有任何内容可以迭代。

Collection#fetch使用Collection#set将获取的模型合并到集合中。这将触发集合上的"add"，"remove"和"change"事件。您可以从集合中侦听这些事件并重新渲染：

initialize: function() {
    this.listenTo(this.collection, 'add remove change', this.render);
}

但是这会非常浪费，因为您将为每个新添加的模型重新渲染视图。另一种方法是使用{reset:true}获取

当模型数据从服务器返回时，它使用 set 来（智能地）合并获取的模型，除非你通过{reset: true}，在这种情况下集合将（有效地）重置

和reset将触发单个"reset"事件。所以在你的路由器中，你可以说：

this.productoItems = new Productos();
this.productoItems.fetch({ reset: true });

然后在你看来：

initialize: function() {
    this.listenTo(this.collection, 'reset', this.render);
}

使用{reset: true}似乎是您最容易使用的事情。

骨干渲染视图不显示...仅在控制台中显示

1 个答案: