Question

我有这个：

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

问题是，我不想加载register.hbs - 我直接保留寄存器手把的文件，但是想在用户点击链接后立即加载它，并延迟模板从加载到车把加载。

这可能吗？

感谢。

Answer 1

是的，你大部分都可以，但它可能会提供较慢的用户体验，而不仅仅是预先加载它们，或预先编译和加载它们。

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

看起来像这样的一般想法

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);
  }
});

示例：http://emberjs.jsbin.com/OxIDiVU/866/edit

你可以通过创建一个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);
  }
});

http://emberjs.jsbin.com/OxIDiVU/867/edit

最后一句话

现在我考虑一下，你不需要中止并重试转换，之前的模型接受了一个承诺，你可以返回一个允许任何加载路由保持活动的承诺。

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);
  }
});

示例：http://emberjs.jsbin.com/OxIDiVU/868/edit

我说谎了，最后一个注意事项

遵循最后两种模式中的任何一种，您需要了解mixin覆盖beforeModel的默认实现的事实。因此，如果你想在路线上应用它，你需要从路线调用this._super(transition)来调用mixin实现。

示例：http://emberjs.jsbin.com/OxIDiVU/869/edit

用户请求后加载Ember.JS模板（即点击服务该模板的链接）？

1 个答案:

最后一句话

我说谎了，最后一个注意事项