javascript - handlebars.js {{#ifEquals}} 条件中的多个 OR 运算符

Question

我正在尝试执行以下操作，但出现错误:

{{#ifEquals nominatorRegion "BC Region" || nominatorRegion "Saskatchewan Region" || nominatorRegion "Alberta Region"}}

错误:

Uncaught Error: Parse error on line 60:
...rRegion "BC Region" || nominatorRegion "
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'CLOSE_BLOCK_PARAMS'
    at a.parseError (handlebars.min.js:28)
    at a.parse (handlebars.min.js:28)
    at d [as parse] (handlebars.min.js:27)
    at d (handlebars.min.js:28)
    at child.e [as template] (handlebars.min.js:28)
    at child.render (blog.js:289)
    at Object.BlogApp.fn.renderView (blog.js:1266)
    at success (blog.js:987)
    at parse-1.2.19.js:3858
    at wrappedResolvedCallback (parse-1.2.19.js:3762)

我的 Handlebars 比较脚本:

<script>
    Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
        switch (operator) {
            case '==':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
            case '===':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
            case '<':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
            case '<=':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
            case '>':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
            case '>=':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
            case '&&':
            return (v1 && v2) ? options.fn(this) : options.inverse(this);
            case '||':
            return (v1 || v2) ? options.fn(this) : options.inverse(this);
            default:
            return options.inverse(this);
        }
    });
</script>

<script>
    Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
        return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
    });
</script>

Answer 1

首先，您的助手 ifEquals 仅接受 2 个参数，而您传递的参数远不止两个。其实 ||您使用的运算符是一个参数，而不是您想象的运算符。如果您需要 &&/and 运算符，请尝试链接您的测试，如果您需要 ||/or 运算符，请尝试复制这些 block 。

其次，如果你想传递参数，你必须使用'||'或 '&&' 否则它会查找您的数据和 ||不是您数据的字段。

第三种方法是编写一个可以接受更多参数的 Helper，您将在下面的代码片段中找到如何执行此操作:

$(document).ready(function () {
  var context = {
    "regions" : [{"nominatorRegion":"BC Region"},{"nominatorRegion":"Saskatchewan Region"},{"nominatorRegion":"Alberta Region"},{"nominatorRegion":"Delaware Region"},{"nominatorRegion":"Michigan Region"}]
  };
  Handlebars.registerHelper('ifEqualsChained', function() {
      var options = arguments[arguments.length-1];
      // Assuming that all wanted operator are '||'
      valueToTest=arguments[0];
      for (var i = 1; i < (arguments.length - 1); i++) {
        if (valueToTest === arguments[i]) {
          return options.fn(this);
        }
      }
      return options.inverse(this);
  });
  var source = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html = template(context);
  $("#resultPlaceholder").html(html);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<ul>
{{#each regions}}
{{#ifEqualsChained nominatorRegion "BC Region" "Saskatchewan Region" "Alberta Region"}}
<li>
{{nominatorRegion}}
</li>
{{/ifEqualsChained}}
{{/each}}
</ul>
</script>

<div id="resultPlaceholder">
</div>