Javascript 一旦用户请求，加载一个Ember.JS模板（即，为该模板服务的链接已被单击）？

我有这个：

{{#link-to "register"}}Register{{/link-to}}

问题是，我不想加载

register.hbs

——我将register手柄直接放在其中的文件，但希望在用户单击链接后立即加载，并延迟加载模板，直到手柄加载完毕

这可能吗

---

谢谢。

是的，您基本上可以，但它可能会提供比预先加载或预编译和预先加载更慢的用户体验

因此，在您的特定用例中，您应该停止转换，获取并编译模板，然后重试转换

总体思路是这样的

App.ColorRoute = Ember.Route.extend({
  beforeModel: function(transition){
    if(!Em.TEMPLATES.color){
      transition.abort();
        $.ajax({
          url: '/templates/color.hbs',
          success: function(data) {
            Em.TEMPLATES.color = Em.Handlebars.compile(data);
            transition.retry();
          }
       });
    }

  },
  model: function(params) {
    return this.store.find('color', params.id);
  }
});

例如：

您可以通过创建一个mixin并将其应用于您想要在其上实现此模式的路由，使其更易于重用

App.TemplateMixin = Em.Mixin.create({
  templateRequired: null,
  beforeModel: function(transition){
    var template = this.get('templateRequired');
    if(template && ! Em.TEMPLATES[template]){
       transition.abort();
       $.ajax({
          url: '/templates/'+ template + '.hbs',
          success: function(data) {
            Em.TEMPLATES[template] = Em.Handlebars.compile(data);
            transition.retry();
          }
       });

    }
  }
});

App.ColorRoute = Ember.Route.extend(App.TemplateMixin,{
  templateRequired:'color',
  model: function(params) {
    return this.store.find('color', params.id);
  }
});

最后一句话 现在我想了想，您不需要中止并重试转换，before模型接受了一个承诺，您只需返回一个允许任何加载路由保持活动的承诺

App.TemplateMixin = Em.Mixin.create({
  templateRequired: null,
  beforeModel: function(transition){
    var template = this.get('templateRequired');
    if(template && ! Em.TEMPLATES[template]){

       return $.ajax({
          url: '/templates/'+ template + '.hbs'
       }).then(function(data){
          Em.TEMPLATES[template] = Em.Handlebars.compile(data);
       });
    }
  }
});

App.ColorRoute = Ember.Route.extend(App.TemplateMixin,{
  templateRequired:'color',
  model: function(params) {
    return this.store.find('color', params.id);
  }
});

例如：

我撒谎了，最后一个音符 遵循最后两种模式中的任何一种，您需要知道mixin正在覆盖beforeModel的默认实现。因此，如果您想在路由上也应用它，您需要从路由调用

this.\u super（transition）

，以调用mixin实现

---

示例：

不理解这一部分：“将模板从加载推迟到把手加载。”您需要某种延迟的用例是什么？@SteveH。抱歉-这意味着在用户单击链接之前，它不会被加载，这是它开始加载的时候。回答得很好。你能看到一个你想这样做的场景吗？看起来很臭。如果你的应用程序加载了可变的模板代码，那看起来就像是回到了意大利面条的世界。不是真的，就像我说的，这是一个较慢的用户体验。也许你是通过不提供模板来隐藏模板，或者你在提供模板之前需要经过身份验证，我不知道，这对我来说似乎太过分了。大量的额外代码只会带来较少的体验。也许他们有10000个模板和一个可笑的路由器。