3

我在我的 ember 应用程序开始时执行一些操作，并希望在每个步骤完成时显示一个 twitter 引导进度条。

问题是我认为所有更新进度条的调用都在运行循环结束时被退回到一个调用。

当一切都完成后，进度条才会更新到 100%。

我对 ember 运行循环知之甚少，不知道如何在每一步更新栏。

我使用 Ember.run.next() 吗？

编辑：

所以我正在更新进度条：

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

并且金额被传递到函数中

上述行之间采取的步骤基本上是创建一些种子数据 Ember 模型，没有什么特别之处。

但是正在发生的事情是，我认为所有设置宽度的调用都被反弹到一个调用......

我之前注意到像这样的css mod有时在控制权传回系统之前不起作用......

编辑 2：我添加了一个jsbin来说明问题。发生的情况是视图仅在操作中的所有代码完成时才会更新，这不是我想要的。我想以谨慎的步骤更新进度条。

任何人有任何想法如何做到这一点？

4

2 回答 2

2

看一眼：

github：https ://github.com/ember-addons/bootstrap-for-ember 演示：http ://ember-addons.github.io/bootstrap-for-ember

它支持引导进度条组件，无需任何接线代码即可轻松绑定到控制器。

于 2013-08-28T15:13:01.653 回答
2

这可能取决于进度任务完成的速度。我目前正在ProgressView使用具有progress更新属性的相应模型来执行此操作。

当模型更改时，进度条会随着视图绑定到此模型而更新。这就是我的做法。模型中的实际值使用来自其他部分的事件进行更新，这里使用了 setInterval。

编辑：用 jsbin 更新问题后

这些this.set('progress')调用被折叠成一个调用，其中最后一个值由 Ember 运行循环设置。这是一项重要的性能优化，有助于防止绑定在每个运行循环中只为给定属性触发一次。

要强制将progress呼叫排队，您需要将其包装在某种间隔中，或使用Ember.run.scheduleOnce. 即：- 立即增加步数计数器，然后以间隔或scheduleOnce.

这是一个例子ProgressStepper。您指定totalStepsat 实例化时间，并next在步骤完成时调用。进度条可以绑定到它的progress属性。它使用scheduleOnce，您可以使用 100 毫秒的 setInterval 来减慢速度。

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

这是一个更新的jsbin。

于 2013-07-13T06:22:14.253 回答