BackboneJS - 如何添加进度而获取集合 [英] BackboneJS - How to add a Progressbar while fetching collection

问题描述

我有一个主干应用程序，我通过单击从列表中获取信不同的集合。所以，我想添加一个进度条或某种旋转图像，但我不知道如何做到这一点。

I have an Backbone App where I fetch different collections by clicking a Letter from a list. So, I want to add a Progressbar or some kind of rotating image but I dont know how to do this.

我的视图看起来像这样

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

因此​​，没有人有一个想法如何做到这一点？我能想象我应该做的初始化或beforeRender什么？

So does anyone have an idea how to do this? I could imagine I should do something in initialize or beforeRender?

在此先感谢

推荐答案

您可以用微调的负载效应。对于您需要

---

You Can use Spinner for the loading effect. For that you need

spin.js

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

Add entry of that spin.js into main file.

c您必须添加要使用微调继$ C $。

To use that spinner Following code you have to add.

VAR yourSpinner =新的微调（）;
            VAR的目标=的document.getElementById（'spinHere'）;
            yourSpinner.spin（目标）;

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

有关例如你的情况采取updateState：功能（）{}

For e.g in your case take 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);
        }

这篇关于BackboneJS - 如何添加进度而获取集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！