Làm cách nào để hoàn thành if / other trong mustache.js?


258

Có vẻ khá kỳ lạ khi tôi không thể tìm ra cách làm điều này trong bộ ria mép. Nó có được hỗ trợ không?

Đây là nỗ lực đáng buồn của tôi khi cố gắng:

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

Điều này rõ ràng là không đúng, nhưng tài liệu không đề cập đến bất cứ điều gì như thế này. Từ "khác" thậm chí không được đề cập :(

Ngoài ra, tại sao ria mép được thiết kế theo cách này? Là loại điều này được coi là xấu? Có phải nó đang cố buộc tôi đặt giá trị mặc định trong chính mô hình không? Còn những trường hợp không thể thì sao?


1
"tại sao ria mép được thiết kế theo cách này?" Tôi không chắc lắm, nhưng tôi nghĩ ý tưởng là một ngôn ngữ tạo khuôn mẫu chỉ nên là: một ngôn ngữ để viết các mẫu, tức là những thứ trông giống như đầu ra mà chúng tạo ra, chỉ với các lỗ mà các bit biến đổi đi. Đặt logic trong ngôn ngữ mẫu làm cho các mẫu phức tạp hơn và khi bạn đã có ngôn ngữ lập trình để xử lý các bit logic, tại sao phải bận tâm?
Paul D. Chờ

4
@ PaulD.Waite "Logic-less" thực sự có nghĩa là "mã không độc đoán", tôi nghĩ vậy. Thật tệ khi đặt logic xem đúng trong mã cũng như đặt logic không xem trong một mẫu. Mustache cố gắng cung cấp một logic tối thiểu để thực hiện điều đó.
jpmc26

2
Hoặc sử dụng tay lái thay vì ria mép. Có thể viết, ví dụ như {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}dễ đọc hơn, gọn gàng hơn nhiều, và vẫn đang trình bày. "Không logic" là một hướng dẫn, nó không phải là một cái vợt.
trượt tuyết

Có lẽ đó không phải là một công cụ tạo khuôn đủ linh hoạt khi OP nói rằng "đây là nỗ lực đáng buồn của tôi [...] điều này rõ ràng là không đúng" ... và sau đó câu trả lời được chấp nhận là bản sao của mã đó :). Không phán xét về OP hoặc câu trả lời; chỉ vàomustache
lùn

Câu trả lời:


498

Đây là cách bạn làm nếu / khác trong Mustache (được hỗ trợ hoàn hảo):

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

Hoặc trong trường hợp của bạn:

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

Tìm các phần đảo ngược trong tài liệu: https://github.com/janl/mustache.js


89
Các tài liệu ria mép là vui nhộn. "Chúng tôi gọi nó là" không logic "bởi vì không có câu lệnh if, mệnh đề khác hoặc cho các vòng lặp." Yeeeeaaaaaa ....
đóng hộp

6
@boxed, về mặt kỹ thuật bạn đã đúng, phần đảo ngược là một câu lệnh logic, vì nó kiểm tra giá trị thẻ. Nhưng, tôi nghĩ rằng sắc thái ở đây là cả hai câu lệnh phải được đánh giá rõ ràng, thay vì một if / other. Về cơ bản, ria mép buộc cấu trúc if (condition){ //do something}theo sau a if (!condition){//do something else}. Ngoài ra, lượng logic mà người ta có thể thực hiện trong logic giảm đi rất nhiều so với ngôn ngữ dựa trên logic. Sự tồn tại hoặc không tồn tại là những kiểm tra duy nhất, tức là bạn không thể kiểm tra xem giá trị của thẻ có bằng 5 hay không và rơi vào mã của thẻ đó.
MandM

22
@MandM yea ... vì vậy nó có logic nhưng nó không thể làm gì hữu ích: P
đóng hộp

Nó chỉ giữ cho bạn khỏi lộn xộn với logic khác. Có rất nhiều lồng nhau nếu / khác bên trong if khác nếu là dấu hiệu của sự sai lệch
Tebe

@boxed bạn có thể thực hiện vòng lặp với moustache.js (ít nhất là vòng lặp ngFor-ish)
aloisdg chuyển sang codidact.com

54

Đây là một cái gì đó bạn giải quyết trong "bộ điều khiển", đó là điểm của khuôn mẫu không logic.

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

Đây thực sự là RẤT NHIỀU sau đó duy trì url hình ảnh hoặc phương tiện khác có thể thay đổi hoặc có thể không thay đổi trong các mẫu của bạn, nhưng cần một số làm quen. Vấn đề là không học được tầm nhìn đường hầm mẫu, url của avatar img bắt buộc được sử dụng trong các mẫu khác, bạn sẽ duy trì url đó trên các mẫu X hoặc một đối tượng cài đặt DEFAULTS? ;)

Một lựa chọn khác là làm như sau:

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

Và trong mẫu:

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

Nhưng điều đó đi ngược lại với toàn bộ ý nghĩa của việc tạo khuôn mẫu không logic. Nếu đó là những gì bạn muốn làm, bạn muốn tạo khuôn mẫu hợp lý và bạn không nên sử dụng Mustache, mặc dù vậy, hãy tự cho mình cơ hội công bằng khi học khái niệm này;)


Cảm ơn. Đó là một phản ứng tuyệt vời! Nó thực sự giúp tôi với các khía cạnh cấu trúc khác về "khi nào nên làm công cụ" trong cấu trúc của mã javascript.
egervari

{{/ # hasAvatar}} và {{/ # noAvatar}} phải là {{/ hasAvatar}} và {{/ noAvatar}} trong câu trả lời này.
Mulhoon

14

Tuyên bố khác của bạn sẽ trông như thế này (lưu ý ^):

{{^avatar}}
 ...
{{/avatar}}

Trong ria mép, điều này được gọi là 'Phần đảo ngược'.


7
lưu ý rằng bạn không cần cả # và ^, đó chỉ là ^ cho trường hợp 'không'
zappan

Điều đó không hoạt động trong phiên bản mới nhất. Zappan là chính xác, bạn chỉ cần ^
simonmorley

0

Bạn có thể định nghĩa một người trợ giúp trong chế độ xem. Tuy nhiên, logic điều kiện có phần hạn chế. Moxy-Macintosh ( https://github.com/dcmox/moxyscript-stpson ) dường như giải quyết vấn đề này với những người trợ giúp "tham số hóa", ví dụ:

{{isActive param}}

và theo quan điểm:

view.isActive = function (path: string) {return path === this.path? "class = 'hoạt động'": ''}


0

Lưu ý, bạn có thể sử dụng {{.}}để kết xuất mục ngữ cảnh hiện tại.

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.