yükleme tutamaçları şablonunu eşzamansız olarak yükleme

Question

Şablonu almak ve derlemek için derlemek için ajax çağrısı kullanarak derlenmiş bir handlebars şablonu (tüm şablonlarımın ayrı dosyalarında var) veren bir işlev yazmaya çalışıyorum ama bunu kullanmak için bir söz kullanmak için. Gibi bir şey yapmak, böylece

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

nasıl vaatlerle yapıyorsun:

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

Answer 1

Chovy, sana bir cevap kabul etmiş ancak getTemplate, .success() yerine .then() zincirleme olarak, neredeyse söz konusu olduğu gibi yazılabilir olduğunu bilmek ilginizi çekebilir bkz : Veri iletmek için charlietfl'in fikrini benimsemek veya

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

nett etkisi getTemplate ait charlietfl sürümü ile aynıdır fakat .then() gereksiz bir açık Ertelendi oluşturmayı kolaylaştırır: Tam oluşan parçanın bir Promise dönün. Kod böylece daha kompakttır.

<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> 

sizin MainApp

içine koymak:

Answer 2

ardından şablon adının yanı sıra getTemplate işleve bir veri argümanı ekler.

$(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

Ben Yalnızca ana uygulama görünümünde bu eklemek zorunda github

de kontrol konunun bu tür yardımcı olacak bir kütüphane oluşturdu

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

ve onları, örneğin, istediğiniz şablonu ile bir kalıcı açmak için, sadece sahip olmak:

FactoryController.loadModalTemplate(templateName, callback); 

Ve FactoryController ve RepositoryController