javascript - Ember.js: Controller 什么时候可以访问模型？

Question

在 Ember 中， Controller 什么时候可以访问模型？

下面是一个简单的 Ember 应用程序，其中包含静态模型和尝试访问 init 上的模型的 Controller 。您会注意到，在 init 上，模型 title 属性是 undefined。但是，setTimeout 表明模型稍后可以访问。

我的印象是，在模型准备好之前，Ember 不会启动 Controller 。它是否正确？ Ember 文档 ( http://emberjs.com/guides/routing/specifying-a-routes-model/ ) 表明，即使是异步加载的模型，在实例化 Controller 时也可用。

http://jsfiddle.net/vu263uwq/1/

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return posts[0];
    }
});

App.IndexController = Ember.ObjectController.extend({
    alertTitle: function() {
        var that = this;

        jQuery(".output").append("1. "+this.get("title")+"<br />"); //Returns "undefined"

        setTimeout(function() {
            jQuery(".output").append("2. "+that.get("title")); //Returns the correct title
        }, 1000);
    }.on("init")
});

var posts = [
    {
        id: 1,
        title: "First title",
        body: "Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam."
    },{
        id: 2,
        title: "Second title",
        body: "Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."
    }
];

Answer 1

你的印象其实是错误的。 setupController Hook 是您在 Controller 上设置任何属性(包括模型)的地方。其实，全部setupController默认情况下是在 Controller 上设置模型。这就是为什么如果您覆盖该钩子(Hook)并且仍然需要 model设置时，您必须显式设置模型或调用 this._super(controller, model) .

注意 setupController 的签名:

setupController: function(controller, model)

为了使其工作， Controller 必须已经在 Ember 设置模型的点上实例化。 Init 在 Controller 实例化期间被触发。因此请调用 init发生在 model 之前已设置`

对于模型的异步获取，如果你的模型钩子(Hook)返回一个 Promise，Ember 将阻塞，直到可以将已履行的 Promise 传递到 setupController 中。函数，以便模型被分配给 promise 的履行，而不是 promise 本身。它可以让您避免类似的调用:

setupController: function(controller, model){  
   var self = this;
   makeAsyncCallReturningPromise().then(function(result){
       self._super(controller, result);
   }
}

这基本上可以完成同样的事情