Ember组件丢失属性绑定

Question

我创建了一个Ember.Component，这是HTML：

<div class="progress-bar-component">
  <div class="progress-bar-indicator" {{bind-attr style="progressWidthStyle"}} max="100"></div>
</div>
<p class="progress-message">{{message}}</p>

我在不同的模板上呈现它，当我更改progressWidthStyle属性时，它会在创建的最后一个组件实例上进行更新。预期的行为是，当我更改progressWidthStyle时，它会更新应用程序中呈现的每个组件。

这是组件代码

import ExposerMixin from 'velocity/mixins/views/exposer';

export
default Ember.Component.extend(ExposerMixin, Ember.Evented, {
  message: 'Content being updated, please do not go offline',
  init: function() {
    this._super();
    this.set('progress', 0);
  },
  defaultClass: '.header-progress-bar-holder',
  /**
    Object used to expose these methods globally (see reference to @mixins/exposer.js)
  **/
  config: {
    progress: ['showProgress', 'hideProgress', 'setMessage']
  },
  /**
    Used to render the progress modal on screen.
    @method showProgress
    @params {Integer} fileSize - Total file size
    @params {Integer} actualProgress - The actual progress that the file has
    @public
  **/
  showProgress: function(fileSize, actualProgress, fileId) {
    // Get the current progress value.
    var updateProgress = actualProgress * 100 / fileSize,
      promise;

    // If index panel is showed, we hide it.
    this.sendAction('hidePanels');

    this.sendAction('setFileId', fileId);

    // Shows the progress modal component
    this._show();

    // Set current progress on the progress bar
    this.set('progress', updateProgress);
  },
  /**
    Used to render the progress modal on screen.
    @method _show
    @private
  **/
  _show: function() {
    // Show the progress bar component.
    $(this.get('defaultClass')).addClass('element-visible')
      .removeClass('visually-hidden');
  },
  /**
    Used to set a new message on the progress modal on screen.
    @method setMessage
    @params {String} newMessage - New message to be displayed on the bottom of the progress bar component.
    @public
  **/
  setMessage: function(newMessage) {
    this.set('message', newMessage);
  },
  /**
    Used to hide the progress modal component
    @method _hide
    @private
  **/
  _hide: function() {
    // Hide progress bar component.
    $(this.get('defaultClass')).toggleClass('visually-hidden');
  },
  /**
    Used to hide the progress modal.
    @method hideProgress
    @public
    @returns - Ember.RSVP.Promise instance.
  **/
  hideProgress: function() {
    var self = this,
      promise = new Ember.RSVP.Promise(function(resolve) {
        // We finished the progress flow and resolves the promise
        resolve();
      }).then(function() {
        // After hide it, reset the progress.
        self._resetProgress();
      });
    // Finally hide the progress bar component.
    this._hide();

    return promise;
  },
  /**
    Used to hide the progress modal.
    @method _resetProgress
    @private
  **/
  _resetProgress: function() {
    this.set('progress', 0);
  },
  /**
    Used to bind to the template with the right style to display current progress.
    @property progressWidthStyle
  **/
  progressWidthStyle: function() {
    return 'width:' + this.get('progress') + '%';
  }.property('progress')

对此有何想法？

提前致谢！