javascript - 我们可以在 View 的 init 钩子(Hook)内访问 View 的相应 Controller 吗

Question

我有一个例子，我需要根据 Controller 的初始属性值选择 View 的模板。因此，当我位于 View 的 init Hook 内时，我需要访问 Controller ，但是当我访问 Controller 时，它返回“null”。

MyApp.ApplicationController = Em.Controller.extend({
  templateVersion: 'small'
});

MyApp.ApplicationView = Em.View.extend({
  init: function(){
    this._super();
    console.log('Controller is: ',this.get('controller'));
    if(this.get('controller').get('templateVersion') == 'small')
    {
      this.set('templateName', 'application-small');
    } else {
      this.set('templateName', 'application-bigger');
    }
  }
});

这不是真实案例，而是真实场景的示例。例如，我设置了一个 jsbin here

Answer 1

我想更合适的方法是动态确定 templateName，如下所示:

MyApp.ApplicationView = Ember.View.extend({
  templateName: function() {
    if (this.get("controller.templateVersion") == "small") {
        return "application-small";
    } else {
        return "application-bigger";
    }
  }.property('controller.templateVersion')
});

这样做，您不需要挂接到 init 函数，因此您的 Controller 属性不可用。

这里是您的更新jsbin .

更新

在您最后发表评论后，我意识到延迟是使您的用例正常工作的重要部分，这是一个改进的版本，即使templateVersion是，它确实会发生变化最初未定义并且设置有一些延迟，这次我们观察 View 的 templateName 属性并调用 rerender。

MyApp.ApplicationView = Ember.View.extend({
  templateName: function() {
    if (this.get("controller.templateVersion") == "small") {
      return "application-small";
    } else {
      return "application-bigger";
    }
  }.property('controller.templateVersion'),
  templateChanged: function() {
    this.rerender();
  }.observes('templateName')
});

这是另一个jsbin新版本的模拟延迟为 2 秒，但它可以是任何值。

希望有帮助。