Moustache cấu trúc lồng nhau phần không khép kín lỗi

Question

Tôi có cấu trúc này rất đơn giản mà không thể được phân tích với bộ ria mép và luôn luôn trả về:

không khép kín phần: chọn

<ul id="source"> 
{{#recomms}}                                                 
    <li> 
    <select> 
     {{#sizes}} 
     <option {{#selected}}selected="selected"{{/selected}} >{{label}}</option> 
     {{/sizes}} 
    </select> 
    </li> 
{{/recomms}} 
</ul> 

Rendering javascript:

$("#placement").html(Mustache.render($('#source').html(), data)); 

Nếu tôi di chuyển # {{selected}} ra khỏi thẻ tùy chọn, nó bắt đầu hoạt động bình thường.

Bộ ria mép có hỗ trợ # {{thẻ được đặt trong phần tử html không?

Answer 1

Moustache sẽ hoạt động như thế này, bạn đang thực hiện nó một cách chính xác.

Đó là một phân tích cú pháp văn bản đơn giản và như vậy không quan tâm đến cấu trúc HTML/thẻ/vv

Phiên bản môi trường/phân tích cú pháp bạn đang sử dụng cho Moustache? Vì điều này dường như hoạt động trong bản trình diễn chính thức.

tôi bước vào sau trong Mustache demo site và nó hoạt động như mong đợi:

Moustache Template

<ul id="source"> 
{{#recomms}}                                                 
    <li class=""> 
    <select name="size" class="recommendation-size"> 
     {{#sizes}} 
     <option value="{{val}}" {{#selected}}selected="selected"{{/selected}} >{{label}}</option> 
     {{/sizes}} 
    </select> 
    </li> 
{{/recomms}} 
</ul> 

mẫu JSON

{"recomms": [ 
    {"sizes": [ 
     { "val": "value", "label": "label", "selected": false }, 
     { "val": "value2", "label": "label2", "selected": true } 
    ]} 
]} 

Output

<ul id="source"> 
<li class=""> 
<select name="size" class="recommendation-size"> 
<option value="value" >label</option> 
<option value="value2" selected="selected">label2</option> 
</select> 
</li> 
</ul> 

Nếu bạn có thể liên kết đến một lỗi Fiddle sẽ giúp bạn tìm ra điều gì đang xảy ra, nhưng điều này sẽ hiệu quả.

EDIT

tôi có thể đã phát hiện ra vấn đề. Bạn đang tải HTML từ một phần tử HTML hiện có bằng cách sử dụng jQuery, có nghĩa là trình duyệt đã cố gắng hiển thị HTML và loại bỏ các bit không hợp lệ, bao gồm bit {{/selected}}.

Hãy thử sử dụng một kỹ thuật khác nhau để tải mẫu Moustache vào mã Javascript của bạn, chẳng hạn như ...

• Đặt mẫu trong một biến javascript thay vì trong mã nguồn HTML của trang
• tải mẫu từ máy chủ sử dụng jQuery.get()
• thoát khỏi < và > 's trong mẫu và đặt nó trong một ẩn textarea, sau đó sử dụng phương pháp .val() jQuery để có được những mẫu và không dò tìm < và > trước khi bạn hiển thị nó

Như bạn đã thấy trong nhận xét, tùy chọn đầu tiên hoạt động tốt!

Câu hỏi mới nhất

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.