ember.js - Ember.js setupController和声明<Name> Controller有什么区别

我在Ember.js官方教程中看到了许多令人困惑的示例。

我真的不喜欢的一个例子是:

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('title', "Hello world!");
    }
});

App.ApplicationController = Ember.Controller.extend({
    appName: 'My First Example'
});

现在，据我所知，我可以这样写:

App.ApplicationController = Ember.Controller.extend({
    appName: 'My First Example',
    title: 'Hello world!'
});

并从路线中删除setupController。

使用setupController的目的/好处是什么？

最佳答案

setupController主要用于动态设置一些 Controller 上下文。在您的示例中，如果标题始终是“Hello world!”可以在类声明中设置它。

默认情况下，setupController会将model的controller属性设置为从路由的model钩子(Hook)返回的值。

例如，您也可以设置其他 Controller 的模型，或者根据模型设置一些初始 Controller 状态。

例如，假设您具有以下条件:

// Model
App.Post = DS.Model.extend({
  title: DS.attr('string'),
  text: DS.attr('string'),
  autoEdit: DS.attr('string')
});

// Controller
App.PostController = Ember.ObjectController.extend({
  isEditing: null,
  toggleEdit: function() { this.toggleProperty('isEditing'); }
});

模板:

<a href="#" {{action 'toggleEdit'}}>Toggle edit mode</a>

{{#if isEditing}}
  {{input type="text" value=title placeholder="Title"}}
  {{textarea type="text" value=text placeholder="Text"}}
{{else}}
  <h1>{{title}}<h1>
  <article>{{text}}</article>
{{/if}}

然后，您决定最好为autoEdit等于true的帖子默认打开编辑模式。您可能需要在路由中执行此操作(因为实例化 Controller 后，对模型一无所知):

App.PostRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this._super(controller, model);
    if (model.get('autoEdit')) {
      controller.set('isEditing', true);
    }
  }
});

因此，基本上，这是用于“初始化” Controller (设置模型和默认状态)。

关于ember.js - Ember.js setupController和声明<Name> Controller有什么区别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17879591/