Question

我第一次使用Handlebars。我有这个复杂的数据结构，它有一个数组，每个项目都是一个自己的数组，如：

rows: [[1a, 2a, 3a], [1b, 2b, 3b], [1c, 2c, 3c]]

我需要输入我的html列表项：

<ul>
 <li>1a</li>
 <li>1b</li>
 <li>1c</li>
</ul>

到目前为止，我已经尝试了很多东西，但没有任何工作。有什么想法吗？

Answer 1

以下是您可以在车把中使用的代码段。 eq条件检查来自ember的真相助手，您可以找到适合您框架的类似包。这假设您总是要打印第二项数组，

＆＃13;

  {{# each rows as |row|}}
  {{#each row as |subrow index|}}
  {{#if (eq index 1)}}
  {{subrow}}
  {{/if}}
  {{/each}}
  {{/each}}

＆＃13;

Answer 2

您将在下面找到一个纯手柄解决方案，该代码片段可以运行，您可以自行测试。我已经包含了两个例子，第一个是您谈到的解决方案，第二个包括所有行。要使第一个示例工作，我必须定义一个“测试”帮助程序来评估条件，以便仅显示子数组中每行的第一次出现。

$(document).ready(function () {
  var context = [['1a', '2a', '3a'], ['1b', '2b', '3b'], ['1c', '2c', '3c']];
  Handlebars.registerHelper('test', function(lvalue, operator, rvalue, options) {
    var doDisplay = false;
    var items = (""+rvalue).split("|");
    var arrayLength = items.length;
    for (var i = 0; (i < arrayLength); i++) {
      if (operator == "eq") {
          if (lvalue == items[i]) {
            doDisplay = true;
          }
        } else if (operator == "ne") {
          if (lvalue != items[i]) {
            doDisplay = true;
          }
        } else if (operator == "gt") {
          if (parseFloat(lvalue) > parseFloat(items[i])) {
            doDisplay = true;
          }
        } else if (operator == "lt") {
          if (parseFloat(lvalue) < parseFloat(items[i])) {
            doDisplay = true;
          }
        }else if (operator == "le") {
          if (parseFloat(lvalue) <= parseFloat(items[i])) {
            doDisplay = true;
          }
        }else if (operator == "ge") {
          if (parseFloat(lvalue) >= parseFloat(items[i])) {
            doDisplay = true;
          }
        }
    }
      if (doDisplay) {
        return options.fn(this);
      } else {
        return "";
      }
  });
	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">
First row of each subarray : <br/>
<ul>
 {{# each this as |row|}}
  {{#each this as |subrow index|}}
  {{#test index 'eq' 0}}
  <li>{{subrow}}</li>
  {{/test}}
  {{/each}}
  {{/each}}
</ul>

Each rows of each array into 2 nested ul elements : <br/>
<ul>
 {{# each this as |row index1|}}
 <li>{{index1}}
 <ul>
  {{#each this as |subrow index2|}}
  <li>{{index2}} - {{subrow}}</li>
  {{/each}}
 </ul>
 </li>
  {{/each}}
</ul>
</script>
<br/>
<div id="resultPlaceholder">
</div>

迭代Handlebars中的数组数组

2 个答案: