Tải mẫu loại trực tiếp từ tệp bên ngoài mà không có công cụ phức tạp?

Question

Tôi đã tìm thấy các công cụ, plugin và chức năng để tải các mẫu bên ngoài, nhưng tôi tự hỏi liệu có cách nào đơn giản hơn để thực hiện nó hay không. Một cái gì đó như thế này?

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> 

Sẽ làm việc này? Có bất kỳ "gotchas" nào không?

Answer 1

Đây là những gì tôi sử dụng để tải một tập tin mẫu có chứa một bộ sưu tập các mẫu:

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

Dưới đây là một ví dụ mà tôi sử dụng chức năng này:

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

xem của bạn sẽ giống như thế này (số if là quan trọng):

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