BackboneJS - 如何在获取集合时添加进度条答案

【问题标题】：BackboneJS - How to add a Progressbar while fetching collectionBackboneJS - 如何在获取集合时添加进度条
【发布时间】：2016-11-21 11:01:54
【问题描述】：

我有一个 Backbone 应用程序，我通过单击列表中的字母来获取不同的集合。所以，我想添加一个进度条或某种旋转图像，但我不知道该怎么做。

我的视图是这样的

function (App, Backbone) {

    var Artists = App.module();
    var ArtistView = Backbone.View.extend({
        tagName : 'li',
        template: 'artistItem',
        serialize: function() {
            var data = this.model.toJSON();
            data.letter = this.model.collection.letter;

            return data;
        },  
    });

    Artists.View = Backbone.View.extend({
        tagName  : 'ul',
        className : 'artistList',
        initialize: function() {
            this.listenTo(this.collection, 'all', this.render);
            this.listenTo(App, 'navigateLetter', this.updateState);
        },
        beforeRender: function() {
            var self = this;

            this.collection.each(function(item) {
                self.insertView(new ArtistView({model: item}))
            })
        },
        updateState: function(letter) {
            this.collection.letter = letter;
            this.stopListening(this.collection);
            this.collection.fetch();
            this.listenTo(this.collection, 'all', this.render);
        }   
    });
    Artists.ArtistsCollection = Backbone.Collection.extend({
        url: function() {
            return '/projects/mdk/index.php/api/artists/' + this.letter; 
        }
    });

    return Artists;
});

那么有人知道如何做到这一点吗？我可以想象我应该在 initialize 或 beforeRender 中做点什么？

提前致谢

【问题讨论】：

标签： backbone.js

【解决方案1】：

您可以使用微调器来实现加载效果。为此，您需要

spin.js

将该 spin.js 的条目添加到主文件中。

使用那个微调器。

var yourSpinner = new Spinner();
var target = document.getElementById('spinHere');
yourSpinner.spin(target);

例如在你的情况下采取updateState:function(){}：

updateState: function(letter) {
    this.collection.letter = letter;
    this.stopListening(this.collection);
    var yourSpinner = new Spinner();
    var target = document.getElementById('spinHere');
    yourSpinner.spin(target);
    this.collection.fetch();
    yourSpinner.stop();
    this.listenTo(this.collection, 'all', this.render);
}

【讨论】：

【解决方案2】：

看看这个：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L4

它来自我的Marionette book 应用程序，其想法是立即显示加载视图，并在获取集合时呈现实际视图（并关闭加载视图，由 Marionette 处理）。它会给出类似（伪代码）：

  var loadingView = new ContactManager.Common.Views.Loading();
  ContactManager.mainRegion.show(loadingView);

  var fetchingContacts = myCollection.fetch();

  $.when(fetchingContacts).done(function(contacts){
    ContactManager.mainRegion.show(new MyCollView({ collection: contacts }));
  });

代码使用 deferred 来确定何时获取集合（因此应该显示新视图）。您可以在此处了解有关使用延迟的更多信息：

【讨论】：