异步加载把手模板

我正在尝试编写一个函数，它将为我提供一个编译的把手模板（我将所有模板放在不同的文件中），使用ajax调用来获取模板并编译它以供使用，但我需要使用一个承诺，所以我可以实际上使用它。

function getTemplate(name){ $.get('/'+name+'.hbs').success(function(src){ var template = Handlebars.compile(src); //can't return the template here. }); } 

我如何用promises做到这一点，所以我可以这样做：

 $("a").click(function(e){ getTemplate('form').done(function(template){ $("body").append(template({ name: "My Name" }) ); }); }); 

Answer 1

Chovy，我看到你已经接受了一个答案，但是你可能有兴趣知道getTemplate可以通过链接.success()而不是.success()来编写，几乎就像在问题中一样：

 function getTemplate(name) { return $.get('/'+name+'.hbs').then(function(src) { return Handlebars.compile(src); }); } 

或者，采用charlietfl的想法传递数据并返回完全组合片段的Promise：

 function getTemplate(name, data) { return $.get('/'+name+'.hbs').then(function(src) { return Handlebars.compile(src)(data); }); } 

nett效果与charlietfl的getTemplate版本相同，但getTemplate .then()使得不必显式创建Deferred。 因此代码更紧凑。

Answer 2

下面将一个数据参数添加到getTemplate函数以及模板名称。

 $(function(){ var postData={title: "My New Post", content: "This is my first post!"}; getTemplate('template-1',postData).done(function(data){ $('body').append(data) }) }); function getTemplate( name,data){ var d=$.Deferred(); $.get(name+'.html',function(response){ var template = Handlebars.compile(response); d.resolve(template(data)) }); return d.promise(); } 

DEMO

Answer 3

我创建了一个库来帮助解决这类问题，请在github上查看

您只需将其添加到主应用视图中：

把它放到你的MainApp中

 var MainApp = Em.Application.create({ LOG_TRANSITIONS: true, ready: function () { /** your code **/ MainApp.AppContainerView = Em.ContainerView.extend({}); MainApp.ModalContainerView = Em.ContainerView.extend({}); /** And other containerView if you need for sections in tabs **/ }); 

例如，他们用你想要的模板打开一个模态，你只需要：

 FactoryController.loadModalTemplate(templateName, callback); 

别忘了添加FactoryController和RepositoryController