mustache.js模板引擎中的表示邏輯

Question

使用客戶端mustache.js模板引擎實現以下演示的最簡單方法是什么？

var view = {
  search_term: 'something',
  number_of_hits: 3,
  hits: [...]
};

如果number_of_hits == 0，則在屏幕上打印：“未找到結果”

如果number_of_hits == 1，則在屏幕上打印：“找到一個結果”

如果number_of_hits > 1，則在屏幕上打印：“找到N個結果”

知道胡須是無邏輯的模板引擎，是否可以使用現有的胡須標簽完全做到這一點，否則我將不得不更改JSON響應？

Answer 1

使用Mustache，可以使用{{#section}}和{{^inverted}}標簽區分0和非0值：

<!-- If number_of_hits is not 0, show hits -->
{{#number_of_hits}}
 {{number_of_hits}} hits
{{/number_of_hits}}

<!-- If number of hits is 0 (or any other falsy value) -->
{{^number_of_hits}}
  No hits
{{/number_of_hits}}

據我所知，Mustache無法檢測到1和2之間的差異。 為此，您必須修改傳遞到模板中的view對象。 可能是這樣的：

var hits = 3;
var view = {
  search_term: 'something',
  number_of_hits: hits,
  hitkind: { 
    none: hits === 0,
    one:  hits === 1,
    many: hits > 1
  }
};

並在模板中

{{#hitkind.none}} No hits {{/hitkind.none}}
{{#hitkind.one }} One hit {{/hitkind.one}}
{{#hitkind.many}} {{number_of_hits}} hits {{/hitkind.many}}

或者，您可以考慮將模板引擎更改為Handlebars.js 。 車把是Mustache的超集，這意味着您的所有Mustache模板都可以使用。 就像Moustache的那樣，車把模板是無邏輯的，因此它不能使您直接將邏輯寫入模板。 相反，它提供了Helpers的概念，或可從模板調用的函數。

使用把手，您可以定義一個助手，例如：

Handlebars.registerHelper('hitCount', function(count) {
  if(count === 0) return "No hits";
  if(count === 1) return "One hit";
  return count + " hits".
});

並從模板調用它：

{{hitCount number_of_hits}}