ładowanie szablonu kierownicy asynchronicznie

Question

Próbuję napisać funkcję, która da mi skompilowany szablon kierownicy (Mam wszystkie moje szablony w osobnych plikach), używając wywołania ajax, aby uzyskać szablon i skompilować go do użycia, ale potrzebuję używać obietnicy, więc mogę jej użyć.

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

Jak mogę to zrobić z obietnicami, więc mogę zrobić coś takiego:

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

Answer 1

Chovy widzę zaakceptowaniu odpowiedzi, ale może być zainteresowany, aby wiedzieć, że getTemplate może przez łańcuchowym .then() zamiast .success() być napisany prawie jak w pytaniu :

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

lub, przyjmując pomysł charlietfl na przekazywanie danych i powrót obietnica całkowicie złożonego fragmentu:

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

Efekt netto jest identyczna z wersją charlietfl dnia getTemplate ale .then() sprawia, że ​​konieczne tworzenie odroczony wyraźnie. Kod jest zatem bardziej zwarty.

Answer 2

obserwuję dodaje argument danych do funkcji getTemplate jak również nazwy szablonu.

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

stworzyłem bibliotekę, aby pomóc z tego rodzaju problemu, sprawdź na github

Trzeba tylko dodać do głównej aplikacji widzenia:

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

umieścić to w swoim 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 **/ 
    }); 

i na przykład, aby otworzyć modal z szablonem, który chcesz, musisz tylko:

FactoryController.loadModalTemplate(templateName, callback); 

I nie zapomnij dodać FactoryController i RepositoryController