2013-06-12 10 views
22

Znalazłem silniki, wtyczki i funkcje do ładowania zewnętrznych szablonów, ale zastanawiam się, czy jest prostszy sposób na zrobienie tego. Coś takiego?Załaduj szablon nokautu z zewnętrznego pliku bez złożonego silnika?

templates.html

<script id="testTemplate" type="text/html"> 
<div>this is a div</div> 
</script> 

index.html

<div id="templateContainer"></div> 
<script> 
    $(document).ready(function() { 
     $("#templateContainer").load("templates.html"); 
    } 
</script> 

Czy to zadziała? Czy są jakieś "gotchy"?

Odpowiedz

28

Oto co mogę użyć, aby załadować plik szablonu, który zawiera zbiór szablonów:

var loadTemplateCollection = function(file, success) { 
    $.get('templates/' + file + '.html', function(templates) { 
     $('body').append('<div style="display:none">' + templates + '<\/div>'); 
     success(); 
    }); 
}; 

Oto przykład, gdzie mogę skorzystać z tej funkcji:

self.loadPage = function() { 
    if (!self.isLoaded()) { 
     loadTemplateCollection('uploadwizard', function() { 
      self.isLoaded(true); 
      self.uploadWizard(); 
     }); 
    } 
} 

Państwa zdanie będzie wyglądać mniej więcej tak (Ważny jest model if):

<div data-bind="template: {'if': isLoaded, name: 'uploadwizard', data: wizard}"></div> 
+0

I co 'zmienna templates' zawiera w' loadTemplateCollection'? Elementy skryptu? – Alvaro

+1

Są to elementy "