我正在尝试编写一个函数,它会给我一个编译好的把手模板(我的所有模板都在不同的文件中),使用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"
})
);
});
});
答案 0 :(得分:16)
Chovy,我发现你已经接受了答案,但你可能有兴趣知道getTemplate
可以通过链接.then()
而不是.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
版本相同,但.then()
使得无需显式创建Deferred。因此代码更紧凑。
答案 1 :(得分:4)
以下为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 强>
答案 2 :(得分:1)
我创建了一个图书馆来帮助解决此类问题,请查看github
您只需将其添加到主应用视图中:
<script type="text/x-handlebars" data-template-name="application">
<!-- Your HTML code -->
<div class="container">
<div class="modal fade" id="editView" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
{{view MainApp.ModalContainerView elementId="modalContainerView"}}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- modal edit dialog -->
{{view MainApp.AppContainerView elementId="appContainerView"}}
{{outlet}}
</div> <!-- main container -->
</script>
将此内容放入您的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