Ember.js 余烬组件正在丢失属性绑定

我创建了一个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>

有什么想法吗

---

提前谢谢

您是否也会添加exposermixin？不，我读错了，您希望您的一个组件影响所有其他组件？所以，如果其中一个说隐藏，那么全部隐藏？exposer mixin就是我用来通过控制台调用组件的一个mixin（从另一个应用程序，这里没什么重要的）。我正在从ember控制台调用showProgress（100，30，1）方法，并更新（style=“width:30%”）最后渲染的组件（因此，如果渲染了3个组件，我只看到一个具有style=“width:30%”的组件和另外两个具有style=“width:0”的组件）我认为这就是为什么当Ember创建组件的新实例时，它会将“progress”属性设置为零。如果要更改每个实例的进度值，则必须获取对每个实例的引用。我有点搞不懂你说的余烬控制台是什么意思，你是说余烬检查器吗？对不起，是的，是余烬检查器。我是否感到困惑，或者Ember.Component的行为是要有可重用的东西？如何获得对组件每个实例的引用？

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')