装载车把异步模板(loading handlebars template asynchronousl

我试图写一个函数，将使用AJAX调用来获取模板和编译使用给我一个编译车把模板（我是在独立的文件中的所有我的模板），但我需要使用一个承诺，所以我可以实际使用它。

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

如何做到这一点与承诺，所以我可以喜欢做一些事情：

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

Answer 1:

Chovy，我看你已经接受一个答案，但你可能有兴趣知道， getTemplate可以通过链接.then()而不是.success()写成几乎一样的问题：

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

或者，采用charlietfl的主意，在数据传递和返回一个完全由片段的承诺：

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

实价的效果是相同的charlietfl的版本getTemplate但是.then()使得不必创建一个明确的推迟。 该代码是因此更紧凑。

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上

你只需要添加到您的主应用程序的看法：

<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

文章来源: loading handlebars template asynchronously