如何在mustache.js中完成if/else？

209

似乎很奇怪，我不知道如何在鬍子中做這個。它是否支持？如何在mustache.js中完成if/else？

這是我在努力嘗試傷心：

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

這顯然是不對的，但文檔沒有提到這樣的事。「別」這個詞甚至沒有提到:(

此外，爲什麼鬍鬚設計這種方式？這種事情被認爲是壞的嗎？它試圖迫使我設置模型本身的默認值？有關情況這是不可能的？

來源

2011-05-17 egervari

「爲什麼鬍鬚是用這種方式設計的？」我不太確定，但我認爲這個想法是一個模板語言應該是這樣的：一種用於編寫模板的語言，即看起來像他們產生的輸出的東西，只是有可變位的漏洞。將邏輯放在模板語言中會使模板更加複雜，並且當您已經有編程語言來處理邏輯位時，爲什麼要這麼做呢？ – 2013-09-06 11:05:06

@ PaulD.Waite我認爲「無邏輯」實際上意味着「非任意代碼」。在代碼中放置真正的視圖邏輯與將非視圖邏輯放在模板中一樣糟糕。鬍鬚試圖提供一個最低限度的邏輯來實現這一點。 – jpmc26 2014-08-21 16:57:35

@ jpmc26：非常真實。 – 2014-08-22 09:50:20

407

這是你怎麼做的if/else在鬍鬚（完全支持）：

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

或者你的情況：

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

尋找在文檔反向的段：https://github.com/janl/mustache.js

來源

2011-06-25 16:25:35

+53

鬍鬚文檔是搞笑的。「我們稱之爲」無邏輯「，因爲沒有if語句，else子句或for循環。」 Yeeeeaaaaaa .... – boxed 2015-11-10 13:25:51

@boxed，技術上說你是對的，倒序部分是一個邏輯語句，因爲它檢查標記值。但是，我認爲這裏的細微差別是兩個陳述必須被明確地評估，而不是一個if/else。基本上，小鬍子強制結構體'if（condition）{//做某事}'後跟一個'if（！condition）{//做其他事}}。而且，與基於邏輯的語言相比，可以在邏輯中執行的邏輯數量極其減少。存在或不存在是唯一的檢查，即您無法檢查標記的值是否等於5，然後落入該標記的代碼中。 – MandM 2015-11-13 19:21:10

+12

@MandM yea ...所以它有邏輯，但它只是無法做任何有用的事情：P – boxed 2016-01-05 12:30:35

這是你的「控制器」，這是logicless模板的點解決。

// 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 

}

這其實是好了很多，在之後保持圖像的URL或其他媒體可能會或可能不會改變您的模板，但需要一些習慣。關鍵是要了解模板隧道視覺，一個頭像img url被綁定在其他模板中使用，您是要在X模板還是單個DEFAULTS設置對象上維護該URL？ ;）

另一種方法是做到以下幾點：

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

而且在模板：

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

但是，這違背logicless模板的全部意義。如果這就是你想要做什麼，你要合理的模板，你不應該使用鬍鬚，雖然自己做給它學習這個概念的一個公平的機會;）

來源

2011-05-17 08:03:20 BGerrissen

謝謝。這是一個很好的迴應！它實際上也幫助我瞭解其他結構方面的問題，例如JavaScript代碼結構中的「何時執行任務」。在這個答案中， – egervari 2011-05-17 08:34:04

{{/＃hasAvatar}}和{{/＃noAvatar}}應該是{{/ hasAvatar}}和{{/ noAvatar}}。 – Mulhoon 2012-08-22 10:27:55

你其他說法應該是這樣的（注意^ ）：

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

在小鬍子裏，這叫做'倒立部分'。

來源

2011-06-21 14:51:54 anonym

請注意，您不需要＃和^兩者，只是^因爲'不是'的情況 – zappan 2011-09-28 15:00:57

這不適用於最新版本。 Zappan是正確的，你只需要^ – simonmorley 2013-01-10 22:43:17

如何在mustache.js中完成if/else？

回答

相關問題