ハンドルバーのテンプレートを非同期にロードする

Question

テンプレートを取得してコンパイルするためのコンパイル済みのハンドルバーテンプレート（別ファイルにすべてのテンプレートがあります）を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は、.success()ではなく.then()を連鎖によって、ほとんどの問題のように書くことができることを知って興味があるかもしれません見ます：

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

正味の効果はgetTemplateのcharlietflのバージョンと同じですが、.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