Question

我刚刚开始使用Backbone。我有一个与集合相关联的视图，我想在集合成功与服务器同步时呈现视图。

我设法让我的收藏集成功同步 -

  var MyCollection = Backbone.Collection.extend({
    model: Backbone.Model,
    url: '/api/cart/lineitem'
  });

  var myCollection = new MyCollection();

  myCollection.fetch({
    success: function() {
      console.log('fetched ' + myCollection.length + ' objects');
    }
  });

控制台显示获取功能有效。

然而，在我看来，我得到了一些奇怪的行为。我似乎无法运行渲染功能。

  var MyView = Backbone.View.extend({

    el: $('#mini_cart'),

    cartTpl: _.template($('#miniCartTemplate').html()),

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

    render: function(){
      console.log('rendering MyView');
    }

  });

  var myView = new MyView({
    collection: new MyCollection()
  });

控制台显示事件触发但它永远不会进入render方法（即我收到了重置＆＃39;消息，但从未显示过＆＃39;呈现MyView＆＃39;消息）。我真的不明白发生了什么（我真的不知道reset事件是如何在我的收藏中被解雇的。

Answer 1

this.listenTo(this.collection, 'reset', console.log('collection reset'));

listenTo的第三个参数必须是函数，而不是方法调用（不返回函数）。尝试删除此行或只是将console.log调用包装成如下函数：

 this.listenTo(this.collection, 'reset', function(){console.log('collection reset');});

Answer 2

我不知道这个方法是否是最干净的方法，但是我在路由器中获取并在请求完成后重定向：

index: ->
    self = @
    @subscribes.fetch {
        url: "/subscribes/getbyfacebookid/#{self._options.request.user_id}.json",
        success: (data, xhr) ->
            console.log data
            if data.length == 0 then self.dispIndex() else self.social()
        }

dispForm: ->
    self = @
    $("#app div").html ''
    $("#app center").fadeIn 'fast', () ->
        FB.api 'me', (data) ->
            self.view = new Formapp.Views.Subscribes.NewView(data: data, collection: self.subscribes)
            $("#app center").fadeOut 'fast', () ->
                $('#app div').html(self.view.render().el)

dispIndex: ->
    self = @
    @view = new Formapp.Views.Subscribes.IndexView(@_options)
    $("#app center").fadeOut 'fast', () ->
        $('#app div').html(self.view.render().el)

Answer 3

看起来你正在集合的一个实例上调用fetch，然后将另一个（新）实例传递给视图。这意味着“重置”事件永远不会在视图使用的实例上触发。

 var myView = new MyView({
    collection: myCollection // use the instance you're going to call fetch on
  });

一旦调用console.log方法，就会执行render语句，而不会在触发'reset'事件时执行。这就是为什么你看到日志语句而不是render方法中的日志语句。您可能想要做的是：

// Pass a function to the listenTo method which will be executed when the event fires
this.listenTo(this.collection, 'reset', function() {
    console.log('collection reset') 
});

Answer 4

创建回调：

myCollection.on('reset', myView.render);

还要考虑使用视图中的监听器

myView.listenTo(myCollection, 'reset', this.render)

重置视图集合时如何触发渲染

4 个答案: