Backbone Collection不会在fetch之外呈现

Question

问题：如果在获取集合时调用成功回调方面的render方法，则我的集合无法呈现到页面。

我有一个基本的主干集合，我试图在从我的服务器获取一些json后呈现给我的应用程序。在完成了一系列教程后，我希望它会像这样工作：

var restaurants = new RestaurantsCollection();
var restaurantsView = new RestaurantsView({collection: restaurants});
restaurants.fetch():
$(curate.targets.restaurantApp).append(restaurantsView.render().el);

该集合成功获取json，但它从未附加到页面。

或者，如果我追加fetch()的成功回调，它会附加到页面上。像这样：

var restaurants = new RestaurantsCollection();
var restaurantsView = new RestaurantsView({collection: restaurants});
restaurants.fetch({
    success: function(collection){
        console.log(collection);
        $(curate.targets.restaurantApp).append(restaurantsView.render().$el);


    },
    error: function(jqXHR, textStatus, errorThrown){
        alert(errorThrown);
        console.log(jqXHR);
    }
});

RestaurantsView：

var RestaurantsView = Backbone.View.extend({
    el: $(curate.targets.restaurantList),
    initialize: function(){
      this.collection.fetch();
      this.listenTo(this.collection, 'reset', this.render, this);
    },
    render: function(){
      this.addAll();
      return this;
    },
    addAll: function(){
      this.collection.forEach(this.addOne, this);
    },
    addOne: function(RestaurantModel){
      var restaurantView = new RestaurantModelView({model: RestaurantModel});
      this.$el.append(restaurantView.render().el);
    }
});

是否有必要附加渲染并将视图附加到fetch()的成功回调中，还是有更好的方式？

Answer 1

您应该能够绑定一个在您的视图上触发渲染的集合上的事件 - 如下所示：

这假定您的 RestaurantsView 初始化功能内的代码。

this.collection.on('change', this.render);

此外，您正在寻找的事件将是＆＃34; 同步＆＃34;而不是＆＃34; 重置＆＃34;。 Backbone 1.0.0中的当前源代码将在获取后触发 sync 事件。

注意：如果服务器没有返回任何数据，＆＃34;同步＆＃34;不会被触发。

Answer 2

Fetch通过ajax从你的服务器获取数据，你需要一个回调函数.fetch

Answer 3

尝试重新排序这些行。通常，在调用fetch之前，首先注册要回调的所有事件。

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