Xử lý danh sách trống trong mustache.js

Question

Tôi đang sử dụng mustache.js để hiển thị mẫu trong javascript. Tôi muốn kiểm tra xem danh sách có trống hay không để ẩn thẻ <h2> trong ví dụ sau. Điều này có thể hoặc là mustache.js quá logic-ít hơn?

Đây là mẫu:

<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    {{name}} 
    {{/persons}} 
</ul> 

và đây là dữ liệu:

{ 
    "persons":[ 
    {"name": "max"}, 
    {"name": "tom"} 
    ] 
} 

Answer 1

Để giữ cho mẫu của bạn logic ít hơn, bạn có thể làm cho việc kiểm tra này trước khi render mẫu:

// assuming you get the JSON converted into an object 
var data = { 
    persons: [ 
     {name: "max"} 
     , {name: "tom"} 
    ] 
}; 
data.hasPersons = (data.persons.length > 0); 

Sau đó mẫu của bạn sẽ trông như thế này:

<h2>Persons:</h2> 
{{#hasPersons}} 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/hasPersons}} 

Answer 2

Sử dụng handlebars để thay thế. Đó là một superset của Mustache cung cấp cho bạn thêm chút năng lượng mà bạn cần. Cộng đồng ria mép đã yêu cầu tính năng này nhưng người bảo trì refuses to put it in.

Answer 3

Sau khi đấu tranh cho một nửa ngày với vấn đề này, cuối cùng tôi đã tìm được một giải pháp dễ dàng!

Đừng kiểm tra danh sách, nhưng hãy kiểm tra xem mục đầu tiên của nó có trống không!

mẫu:

{{#persons.0}} 
<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/persons.0}} 
{{^persons.0}}No persons{{/persons.0}} 

dữ liệu:

{ 
    "persons":[ 
    {"name": "max"}, 
    {"name": "tom"} 
    ] 
} 

Output:

<h2>Persons:</h2> 
<ul> 
    <li>max</li> 
    <li>tom</li> 
</ul> 

dữ liệu:

{ 
    "persons": [] 
} 

Đầu ra:

"No Persons" 

Answer 4

Bạn có thể sử dụng person.length. Nếu đó là giá trị trung thực (nghĩa là lớn hơn 0) thì khối sẽ được hiển thị.

{{#persons.length}} 
<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/persons.length}} 

Answer 5

Trong javascript, bạn có thể kiểm tra với {{#names.length}}{{/names.length}} hoặc với {{#names.0}}

Nếu bạn đang ở bên ngoài javascript (ví dụ trong pystache hoặc Scalate), bạn đang trên may mắn. Giải pháp duy nhất sau đó là giới thiệu một boolean riêng biệt, hoặc lồng mảng của bạn vào một đối tượng mà bạn tránh hoàn toàn nếu bạn có một mảng trống, như maxbeatty được đề xuất.