Boucle d'exécution Ember et barre de progression Bootstrap

Question

Je suis en train d'effectuer certaines actions au début de mon application Ember et je veux afficher une barre de progression twitter bootstrap pendant que chaque étape se termine.

Le problème est que je pense que tous les appels pour mettre à jour la barre de progression sont renvoyés à un appel à la fin de la boucle d'exécution.

La barre de progression n'est mise à jour à 100% que lorsque tout est terminé.

Je ne connais pas assez la boucle d'exécution ember pour savoir comment mettre à jour la barre à chaque étape.

Dois-je utiliser Ember.run.next() ??

EDITAR:

Je mets donc à jour la barre de progression avec :

$('#api_progress_bar .bar').width("#{amount}%")

et le montant est passé dans la fonction

Les étapes qui sont prises entre les lignes ci-dessus sont essentiellement la création de quelques modèles Ember de données d'amorçage, rien d'extraordinaire.

Mais ce qui se passe, c'est que je pense que tous les appels pour définir la largeur sont ramenés à un appel...

J'ai déjà remarqué que les modifications css comme celle-ci ne fonctionnent parfois pas tant que le contrôle n'est pas transmis au système...

EDIT 2 : J'ai ajouté un jsbin pour illustrer le problème. Ce qui se passe, c'est que la vue n'est mise à jour que lorsque tout le code de l'action est terminé, ce qui n'est pas ce que je veux. Je veux mettre à jour la barre de progression par étapes discrètes.

Quelqu'un a-t-il une idée de la manière de procéder ?

Answer 1

Cela peut dépendre de la vitesse d'exécution des tâches de progression. Je fais actuellement cela dans un ProgressView en utilisant un modèle correspondant avec un progress qui est mis à jour.

Lorsque le modèle change, la barre de progression se met à jour car la vue est liée à ce modèle. Voici comment je fais ça. La valeur réelle dans le modèle est mise à jour avec des événements provenant d'autres éléments, ici un setInterval est utilisé.

Edit : après question mise à jour avec jsbin

El this.set('progress') sont regroupés en un seul appel avec la dernière valeur définie par la boucle d'exécution Ember. Il s'agit d'une optimisation importante des performances, qui permet d'éviter que les liaisons ne soient exécutées qu'une seule fois pour une propriété donnée par boucle d'exécution.

Pour forcer le progress pour qu'ils soient mis en file d'attente, il faudrait les intégrer dans une sorte d'intervalle, ou utiliser la fonction Ember.run.scheduleOnce . c'est-à-dire : incrémenter immédiatement un compteur de pas, puis décompter plus lentement avec l'intervalle ou scheduleOnce .

Voici un exemple ProgressStepper . Vous spécifiez le totalSteps au moment de l'instanciation, et appeler next lorsqu'une étape est terminée. La barre de progression peut être liée à sa propre page d'accueil. progress propriété. Il utilise scheduleOnce vous pouvez tic-tac plus lent avec setInterval de disons 100ms.

App.ProgressStepper = Em.Object.extend({
  totalSteps: 10,
  currentStep: 0,
  progress: 0,
  complete: Ember.K(),
  pending: 0,
  isOnRunloop: false,

  next: function() {
    this.set('pending', this.get('pending') + 1);
    if (!this.get('isOnRunLoop')) {
      this.set('isOnRunLoop', true);
      this.enqueue();
    } 
  },

  enqueue: function() {
    // ticking on the runloop gives better performance 
    // as it doesn't use additional timers
    Ember.run.scheduleOnce('afterRender', this, 'onNext');

    // use this is if you want to tick slower
    //setTimeout(this.onNext.bind(this), 100);
  },

  onNext: function() {
    this.nextStep();

    if (this.hasPending()) {
      this.enqueue();
    } else {
      this.set('isOnRunLoop', false);
    }
  },

  hasPending: function() {
    return this.get('pending') > 0;
  },

  nextStep: function() {
    this.set('pending', this.get('pending') - 1);

    var currentStep = this.get('currentStep');
    var totalSteps = this.get('totalSteps');
    currentStep++;

    if (currentStep <= totalSteps) {
      this.set('currentStep', currentStep);
      this.updateProgress();

      if (currentStep == totalSteps) {
        Ember.run.scheduleOnce('afterRender', this, 'complete');
      }
    }
  },

  updateProgress: function() {
    var progress = this.get('currentStep') / this.get('totalSteps') * 100;
    this.set('progress', progress);
  }
});

Voici une mise à jour jsbin .

Answer 2

Jetez un coup d'oeil :

github : https://github.com/ember-addons/bootstrap-for-ember démo : http://ember-addons.github.io/bootstrap-for-ember

Il prend en charge le composant de barre de progression bootstrap qui peut être facilement lié au contrôleur sans qu'aucun code de câblage ne soit nécessaire.