1

使用客户端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个结果”

知道 mustache 是无逻辑的模板引擎,是否可以使用现有的 mustache 标签来完成它,或者我将不得不更改 JSON 响应?

4

1 回答 1

1

使用 Mustache,可以使用and标签区分值0和非0值:{{#section}}{{^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}}
于 2013-01-05T10:00:58.397 回答