backbone.js - 获取集合或模型时触发加载视图

Question

我已经使用 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。在您看来，这会是一个好的做法吗？

Answer 1

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

Answer 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})
    }
})

现在好多了，我想。

Answer 3

使用主干同步方法

/* 除了直接 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);

};

Answer 4

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

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