javascript - 直接访问 Ember 路线时模板渲染乱序

Question

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

我遇到过这样的情况:如果我在加载应用程序后导航到 Ember.js 中的路由(例如使用 transitionTo)，一切都会正常。但是，如果我尝试直接导航到路线(通过输入网址或在到达路线后刷新页面)，它将无法正确呈现。

我使用 renderTemplate 将模板放入父路由中。但直接访问路由时，父路由尚未渲染，因此失败，控制台出现以下错误:

无法读取未定义的属性“connectOutlet”

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

Answer 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