處理mustache.js中的空列表

我正在使用mustache.js在JavaScript中呈現模板。我想檢查一下列表是否爲空，或者不在下面的例子中隱藏<h2>標籤。這是可能的還是mustache.js太邏輯了？處理mustache.js中的空列表

這是模板：

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

，這是數據：

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

來源

2012-01-05 Max Schmidt

「數據」不是有效的JSON。 – 2012-01-05 16:16:56

另外，你可能想考慮從鬍子切換到[handlebars]（http://handlebarsjs.com/），它可以更優雅地（我敢說呢？）_handle_這樣的情況。這不是第一次有人要求（並且被拒絕）和留在小鬍子的空列表測試：https：//github.com/defunkt/mustache/issues/47。 – 2012-01-05 16:33:16

@MДΓΓБДLL我在懲罰你，因爲沒有把你的評論作爲一個答案（我會很高興地投了贊成票），把它作爲一個答案我自己，並竊取你的美味的業力點。 – andrewrk 2012-01-22 09:01:15

爲了使您的模板邏輯少，你可以渲染模板之前做這個檢查：

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

那麼你的模板將是這樣的：

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

來源

2012-03-21 15:15:06

儘管這是一個正確的答案，但我認爲不得不使用這種方法是鬍鬚語法真正弱點的一個標誌。只要前端（模板）開發人員可以訪問後端（數據源）代碼，也許可以，但如果兩者是分開的，或者前端開發人員比編碼人員更多地使用HTML slinger，則它會變得非常漂亮不可行的。 – 2012-03-26 17:14:18

@TimHolt，我明白你的觀點。雖然有優勢。假設您想要對應用程序的這部分進行單元測試。使用無邏輯模板引擎，我只滿足於對數據進行單元測試（在提供給Mustache之前），而不必對生成的html進行字符串比較測試。現在，如果我的模板具有邏輯（即使像檢查.length> 0那麼簡單），我也會覺得需要對該邏輯進行單元測試，因此將被迫進行字符串比較或者像selenium/doh機器人。所以，我認爲這是一種折衷。 – 2012-04-11 06:17:49

模板的目的是將視圖從模型和控制器中分離出來。這個解決方案基本上是將View元信息移動到Controller中。小鬍子讓你做這些事情的事實打敗了它自己的目的。模板不應該是無邏輯的（if語句也是邏輯，所以它不是無邏輯的），但模板應該包含視圖邏輯和沒有應用邏輯。 – 2015-01-24 17:23:12

使用handlebars代替。它是鬍鬚的超集，它可以爲你提供所需的一點點能量。小鬍子社區要求這個功能，但維護者refuses to put it in。

來源

2012-01-22 09:00:16 andrewrk

掙扎了半天后，有了這個問題，我終於找到了一個簡單的解決方案！

不檢查列表，但檢查它的第一個項目是否不是空的！

模板：

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

數據：

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

輸出：

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

數據：

{ 
    "persons": [] 
}

輸出：

"No Persons"

來源

2013-01-19 18:40:00

這個答案應該被接受！這是通用的，鬍鬚專用的解決方案，不承擔javascript – Evgeny 2014-06-03 00:49:34

它不適合我。我正在使用Mustashe.java。這對缺乏條件的缺乏對我來說是一種破壞行爲。返回FreeMarker ... – dhalsim2 2015-05-29 00:46:51

這可行。就像添加一個未命名的列表一樣，它使用{{＃。}}循環，然後可以使用{{^。}} No Persons {{/。}}。 – Blizwire 2015-09-22 02:07:23

您可以使用persons.length。如果它是一個真值（即大於0），那麼該塊將被渲染。

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

來源

2013-01-21 11:09:46 Qazzian

這是行不通的，如果你渲染服務器端（外部javascript） – iwein 2013-07-24 14:58:58

@iwein：問題*被*標記爲'''畢竟，它也在節點中工作:) @Qazzian：+1，一個清潔避免鬍子lambdas的方法！ – 2013-09-25 23:23:40

@ o.v。我給了這個答案一個贊成，不要擔心。然而，評論中的其他信息對我很有幫助。 – iwein 2013-09-26 08:18:47

在javascript中你可以用{{#names.length}}{{/names.length}}或{{#names.0}}

檢查如果你的JavaScript之外（例如，在pystache或Scalate的），你的運氣了。唯一的解決方案是引入一個單獨的布爾值，或者將數組嵌套到一個對象中，如果你有一個空數組，就像maxbeatty建議的那樣，這個對象就完全避免了。

來源

2013-07-24 15:04:57 iwein

處理mustache.js中的空列表

回答

相關問題