BackboneJS - 如何在獲取集合時添加一個Progressbar

我有一個Backbone應用程序，我可以通過單擊列表中的一個Letter來獲取不同的集合。所以，我想添加一個Progressbar或某種旋轉圖像，但我不知道如何做到這一點。BackboneJS - 如何在獲取集合時添加一個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; 
});

因此，沒有人有一個想法如何做到這一點？我可以想象我應該在initialize或beforeRender中做些什麼？

在此先感謝

來源

2014-02-25 SHT

看看這個：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 })); 
    });

代碼使用推遲到確定何時收集被取出（因此新的視圖應顯示）。您可以瞭解更多關於此使用deferreds：

來源

2014-02-25 08:57:09

您可以使用一個微調的負載效應。爲此你需要

spin.js

添加條目是spin.js到主文件。

使用該微調器。

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

e.g你的情況採取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); 
}

來源

2014-02-25 08:59:12 Nakul91

BackboneJS - 如何在獲取集合時添加一個Progressbar

回答

相關問題