【问题标题】:Can an event be triggered in Backbone once a collection has been fetched and rendered?获取并呈现集合后,是否可以在 Backbone 中触发事件?
【发布时间】:2012-11-28 12:28:08
【问题描述】:

在对 Backbone 集合调用 collection.fetch({ add: true }) 之后,我想在更新集合的视图完成渲染后触发一个事件。

collection view”有一个“add”方法,它为集合中的每个新项目生成一个“item view”,在该视图上调用“render”,并将其添加到集合视图中。

有没有办法在获取集合完成并且所有项目都已添加和呈现时触发事件?

【问题讨论】:

    标签: javascript backbone.js backbone-events


    【解决方案1】:

    fetch method on collections 采用success 参数:

    获取 collection.fetch([options])

    [...] options 散列采用 successerror 回调,它们将分别作为参数传递 (collection, response, options) 和 (collection, xhr, options) .

    success 回调将在集合更新后调用,因此它将在所有"add" 事件被触发和处理后调用。所以你可以这样做:

    collection.fetch({
        success: function(collection, response, options) {
            collection.trigger('fetched_and_notified');
        }
    });
    

    任何关心的人都可以collection.on('fetched_and_notified', ...) 收听此类事件。如果您愿意,您可以提供自己的 fetch 实现来自动触发此事件,如下所示:

    fetch: function(options) {
        options = options ? _.clone(options) : { };
    
        var success     = options.success;
        options.success = function(collection, response, options) {
            collection.trigger('fetched_and_notified', collection);
            if(success)
                success(collection, response, options);
        };
        Backbone.Collection.prototype.fetch.call(this, options);
    }
    

    【讨论】:

      【解决方案2】:

      您可以使用Backbone.Events基于您的应用程序随时触发各种对象上的自定义事件

      渲染视图后触发事件:

      var MyView = Backbone.View.extend({
      
        initialize: function() {
           _.bindAll(this);
        },  
      
        render: function() {
           //Do all the rendering
      
           this.trigger('myEvent');
        }
      });
      

      this.trigger('myEvent') 是行之有效的。

      【讨论】:

      • 问题是collection view没有“render”方法;仅存在于每个项目视图中。集合视图(单个元素)在应用程序启动时创建,项目视图在加载时添加到其中。添加一批项目视图后,我需要触发事件。一种可能是在某个时间间隔后触发事件,在呈现每个项目视图时重置计时器。
      • 另一个技巧可能是检查视图是否是集合中的最后一个。 if(this.model == this.collection.at(this.collection.length-1)) 然后触发事件。正确设置计时器间隔很复杂,并且可能会产生未来的错误。
      猜你喜欢
      • 2016-01-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多