Làm thế nào để xử lý một BÁO CÁO NẾU trong một mẫu Mustache?

Question

Tôi đang sử dụng bộ ria mép. Tôi đang tạo một danh sách các thông báo. Một đối tượng thông báo JSON trông giống như:

[{"id":1364,"read":true,"author_id":30,"author_name":"Mr A","author_photo":"image.jpg","story":"wants to connect","notified_type":"Friendship","action":"create"}] 

Với bộ ria mép, làm thế nào tôi có thể làm một câu lệnh if hoặc trường hợp tuyên bố dựa trên hành động notified_type & ...

Nếu notified_type == "Hữu nghị" làm .. ....

Nếu notified_type == "khác & & hành động == "mời" render .....

Làm thế nào mà làm việc?

Answer 1

Mẫu Mustache, theo thiết kế, rất đơn giản; số homepage thậm chí còn nói:

Mẫu ít logic.

Vì vậy, cách tiếp cận chung là để làm logic của bạn trong JavaScript và thiết lập một loạt các cờ:

if(notified_type == "Friendship") 
    data.type_friendship = true; 
else if(notified_type == "Other" && action == "invite") 
    data.type_other_invite = true; 
//... 

và sau đó trong mẫu của bạn:

{{#type_friendship}} 
    friendship... 
{{/type_friendship}} 
{{#type_other_invite}} 
    invite... 
{{/type_other_invite}} 

Nếu bạn muốn có một số tiến bộ hơn chức năng nhưng muốn duy trì hầu hết sự đơn giản của Mustache, bạn có thể xem Handlebars:

Bàn điều khiển

cung cấp năng lượng cần thiết để cho phép bạn xây dựng các mẫu ngữ nghĩa một cách hiệu quả mà không gây thất vọng.

Mẫu Mustache tương thích với Handlebars, vì vậy bạn có thể lấy mẫu Mustache, nhập nó vào Handlebars và bắt đầu tận dụng các tính năng Handlebars phụ.

Answer 2

Nói chung, bạn sử dụng # cú pháp:

{{#a_boolean}} 
    I only show up if the boolean was true. 
{{/a_boolean}} 

Mục đích là để di chuyển càng nhiều Logic càng tốt ra khỏi mẫu (có ý nghĩa).

Answer 3

Tôi có một hack đơn giản và chung chung để thực hiện khóa/giá trị nếu câu lệnh thay vì boolean chỉ trong bộ ria mép (và trong một thời trang cực kỳ dễ đọc!):

function buildOptions (object) { 
    var validTypes = ['string', 'number', 'boolean']; 
    var value; 
    var key; 
    for (key in object) { 
     value = object[key]; 
     if (object.hasOwnProperty(key) && validTypes.indexOf(typeof value) !== -1) { 
      object[key + '=' + value] = true; 
     } 
    } 
    return object; 
} 

Với hack này, một đối tượng như thế này:

var contact = { 
    "id": 1364, 
    "author_name": "Mr Nobody", 
    "notified_type": "friendship", 
    "action": "create" 
}; 

sẽ trông như thế này trước khi chuyển đổi:

var contact = { 
    "id": 1364, 
    "id=1364": true, 
    "author_name": "Mr Nobody", 
    "author_name=Mr Nobody": true, 
    "notified_type": "friendship", 
    "notified_type=friendship": true, 
    "action": "create", 
    "action=create": true 
}; 

Và mẫu ria mép của bạn sẽ trông như thế này:

{{#notified_type=friendship}} 
    friendship… 
{{/notified_type=friendship}} 

{{#notified_type=invite}} 
    invite… 
{{/notified_type=invite}} 

Answer 4

Chỉ cần một nhìn qua các tài liệu ria mép và họ hỗ trợ "phần đảo ngược", trong đó họ nêu

họ (phần đảo ngược) sẽ được trả lại nếu chìa khóa không tồn tại, là sai, hoặc là một danh sách trống

http://mustache.github.io/mustache.5.html#Inverted-Sections

{{#value}} 
    value is true 
{{/value}} 
{{^value}} 
    value is false 
{{/value}}