Component Ember的SetupController

Question

我有一个组件，可以在5秒后为动画添加一个类

export default Ember.Component.extend({
    tagName: 'div',
    classNames: ['gears'],
    isVisible: false,

    _startTimer: Ember.on('didInsertElement', function () {
        var _this = this;

        this._visibleTimer = Ember.run.later(this, function () {
            _this._visibleTimer = null;
            _this.set('isVisible', true);
        }, 5000);
    }),

    _endTimer: Ember.on('willDestroyElement', function () {
        if (this._visibleTimer) {
            Ember.run.cancel(this, this._visibleTimer);
        }
    })
});

<i class="fa fa-cog fa-fw big {{if isVisible 'fa-counter'}}"></i>

我的问题是，在特定的路线中我需要设置isVisible: true

我知道在Ember我们可以通过setUpController通过路径访问控制器，但如果我想为组件设置isVisible: true该怎么办？

如果无法做到这一点，还有其他方法可以实现吗？也许在组件内部？

Answer 1

这听起来像是可以通过Ember.Service解决的问题。您可以通过几种方式解决这个问题，但更直接的方法是将服务注入组件并绑定isVisible。

类似的东西：

export default Ember.Service.extend({
  isVisible: false
});

export default Ember.Component.extend({
  visibility: Ember.inject.service(),
  isVisible: Ember.computed.alias('visibility.isVisible')
});

export default Ember.Route.extend({
  visibility: Ember.inject.service(),

  afterModel() {
    this.set('visibility.isVisible', true);
  }
});