获取集合或模型时触发加载视图答案

【问题标题】：trigger loading view when collection or model fetched获取集合或模型时触发加载视图
【发布时间】：2012-08-10 14:14:58
【问题描述】：

我已经使用 Marionette 一个星期了，它真的让我的生活更轻松了！

现在我需要能够在获取集合或模型时通知用户，因为某些视图需要大量时间来呈现/获取。举个例子，我做了一个小模型：

当用户点击一个类别时，需要加载该类别中所有项目的集合。在获取集合之前，我想显示一个加载视图，如图所示（视图 1）。什么是实现这一点的优雅解决方案。我发现以下帖子中用户启用了获取触发器：http://tbranyen.com/post/how-to-indicate-backbone-fetch-progress。这似乎有效，但并不像我想要的那样。这是我想出的：

    var ItemThumbCollectionView = Backbone.Marionette.CollectionView.extend({
        collection: new ItemsCollection(userId),
        itemView: ItemThumbView,
        initialize: function(){
            this.collection.on("fetch", function() {
                //show loading view
            }, this);
            this.collection.on("reset", function() {
                //show final view
            }, this);
            this.collection.fetch();

            Backbone.history.navigate('user/'+identifier);
            this.bindTo(this.collection, "reset", this.render, this)
        }
    });

如果我可以有一个名为“LoadItemView”的可选属性，那就太好了。这将在获取期间覆盖 itemView。在您看来，这会是一个好的做法吗？

【问题讨论】：

使用 collection.on('request') 而不是 collection.on('fetch')。和 collection.fetch({reset:true}) 而不是 collection.fetch()。 ;)

标签： backbone.js marionette

【解决方案1】：

几天前，Derick Bailey 在 Marionette Wiki 中发布了一个可能的解决方案：https://github.com/marionettejs/backbone.marionette/wiki/Displaying-A-%22loading-...%22-Message-For-A-Collection-Or-Composite-View

【讨论】：

不过，这个解决方案有问题。如果您的 fetch 返回零个项目，“加载”屏幕将永远不会消失。
我认为 Boedy 的想法是在正确的轨道上。虽然我肯定会使用this.bindTo(collection 而不是this.collection.on。我可能会将这个逻辑放在一个单独的对象中，而不是直接放在视图中。但我认为这个想法很好。
谢谢。现在 emptyView 对我有用。我想如果返回一个空集合，我可以触发一个事件。
为什么这不能用于 itemView 的？有时，当我加载模型时，模板已加载但尚未获取模型..

【解决方案2】：

var myCollection = Backbone.Marionette.CollectionView.extend({
    initialize: function(){
        this.collection.on('request', function() {
            //show loading here
        })
        this.collection.on('reset', function() {
            //hide loading here
        })
        this.collection.fetch({reset: true})
    }
})

我觉得现在好多了。

【讨论】：

【解决方案3】：

使用 Backbone 同步方法

/* 除了直接 ajax 之外，每个请求都会覆盖同步应用程序 */

Backbone._sync = Backbone.sync;
Backbone.sync = function(method, model, options) {
    // Clone the all options
    var params = _.clone(options);

params.success = function(model) {
    // Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.success)
        options.success(model);
};
params.failure = function(model) {
    // Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.failure)
        options.failure(model);
};
params.error = function(xhr, errText) {
    // Write code to hide the loading symbol
     //$("#loading").hide();
    if (options.error)
        options.error(xhr, errText);
};
// Write code to show the loading symbol
     //$("#loading").show();
Backbone._sync(method, model, params);

};

【讨论】：

【解决方案4】：

一般来说，我建议在获取数据时加载预加载器，然后显示集合。比如：

region.show(myPreloader);
collection.fetch().done(function() {
    region.show(new MyCollectionView({ collection: collection });
});

【讨论】：