Question

我有一个Backbone App，我可以通过单击列表中的Letter来获取不同的集合。所以，我想添加一个Progressbar或某种旋转图像，但我不知道该怎么做。

我的视图看起来像这样

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

那么有人知道如何做到这一点吗？我可以想象我应该在初始化或之前做一些事情吗？

提前致谢

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

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

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

BackboneJS - 如何在获取集合时添加Progressbar

2 个答案: