Moustache, sử dụng mẫu bên ngoài

Question

Tôi đang đọc về cách tạo mẫu với Mustache.js. Những gì tôi không hiểu là làm thế nào là nơi để đặt các mẫu. Tôi không wont họ trong cùng một tập tin.

$.get('test.htm', function(templates) { 
    // Fetch the <script /> block from the loaded external 
    // template file which contains our greetings template. 
    var template = $(templates).filter('#tpl-greeting').html(); 
    $('body').append(Mustache.render(template, templateData)); 
}); 


//test.htm 
<script id="tpl-greeting" type="text/html"> 
<dl> 
    <dt>Name</dt> 
    <dd>{{name}}</dd> 
    <dt>Time</dt> 
    <dd>{{timeNow}}</dd> 
</dl> 
</script> 

Tôi có phải tạo bộ điều khiển trả về mẫu của mình hoặc tôi có thể tham chiếu không?

Answer 1

Có một số cách tiếp cận để thực hiện việc này.

1. Nếu bạn đang sử dụng ngôn ngữ kịch bản lệnh phía máy chủ như PHP, chỉ cần đưa chúng vào một tệp riêng biệt .mst (tiện ích có thể là bất kỳ thứ gì bạn muốn thực sự) trong JS. Ví dụ: var _templateName = <?= JS::mustache('content/templateName.mst') ?>;. Do đó, khi JS thực sự được hiển thị, nó sẽ được trả lại bằng đánh dấu nhưng mã vẫn sẽ được duy trì. Bên cạnh đó, với cách tiếp cận này, nếu bạn đang sử dụng một CDN, trang web của bạn sẽ được hưởng lợi rất nhiều với JS được lưu trữ.
2. Cách tiếp cận khác là tải các tệp HTML bên ngoài bằng bất kỳ phương thức nào của jQuery là $.get, $.getJSON, v.v. Triển khai chi tiết hơn về điều này là given here.

Answer 2

Bạn có thể đặt mẫu trong các tệp riêng biệt như bạn làm với CSS và JS. Bạn có thể sử dụng Chevron để tải mẫu bên ngoài từ các tập tin như vậy:

Bạn thêm trong bạn template một liên kết đến tập tin mẫu của bạn:

<link href="path/to/template.mustache" rel="template" id="templateName"/> 

Sau đó, trong bạn JS bạn có thể làm cho mẫu của bạn như sau:

$("#templateName").Chevron("render", {name: "Slim Shady"}, function(result){ 
    // do something with 'result' 
    // 'result' will contain the result of rendering the template 
    // (in this case 'result' will contain: My name is Slim Shady) 
}); 

các tài liệu của Chevron sẽ cung cấp thêm ví dụ