直接访问 Ember 路由时模板呈现乱序

【问题标题】：Templates render out of order when visiting Ember route directly直接访问 Ember 路由时模板呈现乱序
【发布时间】：2014-09-14 21:27:54
【问题描述】：

Here's a JSBin 演示我遇到的问题。 This is the code 为它。

我遇到过这样一种情况，如果在加载应用程序后导航到 Ember.js 中的路由（例如，使用 transitionTo），一切正常。但是，如果我尝试直接导航到路线（通过输入 url 或在我已经在路线上刷新页面）它不会正确呈现。

我正在使用renderTemplate 将模板放入父路由中。但是直接访问路由的时候还没有渲染父路由，所以会失败，控制台报如下错误：

Cannot read property 'connectOutlet' of undefined

如何确保父路由的模板到位以避免此错误？

【问题讨论】：

您应该将 {{outlet}} 从嵌套模板中拉出。

标签： javascript ember.js url-routing

【解决方案1】：

当您以编程方式将一个模板渲染到另一个模板时，另一个模板必须已经被渲染。您可以安排它在完成渲染后进行渲染。

App.BarRoute = Ember.Route.extend({
  renderTemplate: function() {
    var self = this;
    Em.run.schedule('afterRender', function(){
      self.render('bar', {into: 'baz'});
    });
  }
});

示例：http://jsbin.com/qilem/1#/bar

真的，您在这里与 ember 路由器进行了激烈的斗争。应用程序模板应该在其中定义一个{{outlet}}，但是当您使用渲染时，您创建了一个嵌套范围，其中出口不再存在于应用程序模板中。您可以使用partial 或将{{outlet}} 拉出嵌套模板。

部分示例：http://jsbin.com/qilem/2#/bar

示例渲染：http://jsbin.com/qilem/3#/bar

【讨论】：

谢谢，我最终把{{outlet}} 拉出来了。