javascript - Handlebars.js 中的 "select"类似 "where"

Question

使用handlebars.js作为模板引擎，我需要查询 json 文件，并从这里循环遍历所述文件中 对象 内的数组。该流程的工作原理如下:如果通过点击上的数据属性定义的值与其中的字符串匹配然后，对象数组循环并根据这些条件显示数据。

本质上我需要一个查询，就像我后端到数据库一样，(使用 Laravel)例如:

$attr = "Red";
$prodcuts = DB::table('products')->Where('tags', $tag)->get();

<小时/>

我正在使用一个非常大的 json 文件来完成此任务。例如，如果您需要引用清酒，我创建了一个小得多的清酒:

https://gist.github.com/Panoply/15dc30a9fc598d07b24f0f13a5d42df4

我知道使用handlebars.js我需要创建一个助手来创建一个带有值的字符串:

Handlebars.registerHelper("ifValue", function(conditional, options) {
  if (conditional !== options.hash.equals) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

然后我会让我的 Handlebars 循环:

<ul>
{{#each products}}
{{#ifvalue tags equals='Blue'}}

<li>{{title}}</li>
<li>{{handle}}</li>
<li>{{tags}}</li>
{{#with images.[0]}}<li>{{src}}</li>{{/with}}  
{{#with variants.[0]}}<li>{{price}}</li>{{/with}}

{{/ifvalue}}
{{/each}}
</ul>

问题是我得到空白结果。您可以在 http://tryhandlebarsjs.com/ 尝试这些代码块– 考虑到标签位于对象数组中，我可能会遇到一些冲突。

Answer 1

想通了。 Handlebars 很敏感。如果您偶然发现了这个问题，我是这样修复它的:

Handlebars :

{{#products}}
{{#inArray tags "Red"}}
   {{title}}
 {{#with images.[0]}}<img src="{{ this.src }}">{{/with}} 
{{/inArray}}
{{/products}}

助手(创建 inArray):

Handlebars.registerHelper('inArray', function(array, value, options) {
    if (array.indexOf.call(array, value) >= 0) {
      return options.fn(this);
    } else {
      return options.inverse(this);
    };
});