Làm cách nào để lưu trữ chính xác mẫu HTML trong trang HTML?

Tôi có một số chuỗi mẫu nhỏ, sẽ được hiển thị qua Mustache.js trên cùng một trang. Tôi không cần phải tạo các tệp html riêng biệt cho các mẫu.Làm cách nào để lưu trữ chính xác mẫu HTML trong trang HTML?

Tùy chọn để lưu trữ các mẫu:

lưu trữ trong các biến javascript: chuỗi multiline hackish, rất nhiều thoát của dấu ngoặc kép.
Lưu trữ dưới dạng innerHTML của các div ẩn.

Tôi đã thử phương pháp # 2, nhưng dường như không hoạt động chính xác.

Fiddle: http://jsfiddle.net/RHwnq/2/

<html> 
<head></head> 
<body> 
<div id='templates' class='hide' align=""> 
     <div id='tableTemplate'> 
      <table class="table"> 
       {{#name_list}} 
        <tr><td> {{name}} </td></tr> 
       {{/name_list}} 
      </table> 
     </div> 
</div> 

<script> 
var template = $('#tableTemplate').html(); 
console.log(template); 
</script> 

</body> 
</html>

bản ghi này:

{{#name_list}} 
    {{name}} 
{{/name_list}} 
<table class="table"><tbody><tr><td></td></tr></tbody></table>

Thay vì:

<table class="table"> 
        {{#name_list}} 
         <tr><td> {{name}} </td></tr> 
        {{/name_list}} 
    </table>

này có thể là để do một số chỉnh đánh dấu bởi trình duyệt. Các thủ thuật hay khác để lưu trữ các mẫu HTML trong một trang HTML là gì?

Nguồn

2012-11-28 DhruvPathak

Điều gì về việc không lưu trữ chúng trong cùng một tệp, nhưng tải chúng qua AJAX? – feeela

@feeela no, tôi không muốn thực hiện cuộc gọi ajax để tải 2-3 chuỗi nhỏ, tôi dự định lưu trữ chúng trong cùng một trang. – DhruvPathak

Trong một số hướng dẫn liên quan đến backbone.js/underscore.js họ đã lưu trữ các mẫu trong các thẻ . Hãy xem xét kỹ hơn câu hỏi này: http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script – Marc

tôi lưu trữ chúng trong một thẻ script, vì vậy họ không được trả lại, như thế này:

<script id="abc-template" type="text/html"> 
    <h1>{{name}}</h1> 
</script>

Sau đó, bạn có thể tham khảo chúng như thế này:

var template = $('#abc-template').html(); 
var html = Mustache.to_html(template, data); 
$('#abc-div').html(html);

Nguồn

2012-11-28 11:46:44

Ha, cùng một giải pháp trong vài giây :) –

FML đã lưu cho tôi cả ngày. – Worthy7

Sử dụng <script> thẻ hoạt động tuyệt vời cho điều này:

<script id="tableTemplate" type="text/html"> 
    <table class="table"> 
    {{#name_list}} 
    <tr><td> {{name}} </td></tr> 
    {{/name_list}} 
    </table> 
</script>

Nó thực sự là một thay thế thả, nó sẽ hoạt động vớicủa bạn

Nguồn

2012-11-28 11:47:18

Tùy thuộc vào IDE của bạn, bạn có thể hoặc không thể làm nổi bật cú pháp HTML trong các khối <script></script>. Tôi sử dụng khối div như bạn đã làm, nhưng thêm

#templates {display: none;}

vào CSS.

Nguồn

2017-08-17 18:17:30 abalter

Làm cách nào để lưu trữ chính xác mẫu HTML trong trang HTML?

Trả lời

Các vấn đề liên quan