我们可以访问视图的init钩子中的视图的相应控制器

Question

我有一个案例，我需要根据控制器的初始属性值选择视图的模板。因此，当我在视图的init钩子中时，我需要访问控制器，但是当我访问控制器时，它返回“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函数，因此没有控制器属性可用。

此处更新了jsbin。

的更新

在您上次发表评论后，我意识到延迟是使您的用例有效的重要部分，这里是一个改进的版本，即使templateVersion最初未定义，它确实会发生变化并且设置了一些延迟，这次我们观察视图的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秒，但它可以是任何值。

希望它有所帮助。