javascript - Mustache.js 模板引擎内的表示逻辑

Question

通过客户端实现以下演示的最简单方法是什么 mustache.js template engine ？

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

如果 number_of_hits == 0 则在屏幕上打印:“未找到结果”

如果number_of_hits == 1，则在屏幕上打印:“找到一个结果”

如果number_of_hits > 1，则在屏幕上打印:“找到N个结果”

知道 Mustache 是无逻辑模板引擎，是否可以使用现有的 Mustache 标签来实现它，否则我将不得不更改 JSON 响应？

Answer 1

使用 Mustache，可以使用 {{#section}} 和 来区分值 0 和非 0 值>{{^inverted}} 标签:

<!-- 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 。 Handlebars 是 Mustache 的超集，这意味着您的所有 Mustache 模板都可以使用它。 Handlebars 模板与 Mustache 一样是无逻辑​​的，因此您无法将逻辑直接写入模板。相反，它提供了 Helpers 的概念，或可从模板调用的函数。

使用 Handlebars，您可以定义一个助手，例如:

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

并从模板调用它:

{{hitCount number_of_hits}}