Question

   <body>

<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
    {{#each_when profile "gender" "female"}}
        {{from}} ({{gender}})<br> 
    {{/each_when}}
</script>

<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>

<script>
var json = {
    "profile": [
        { "gender": "female", "from": "Olivia" },
        { "gender": "female", "from": "Meagen" },
        { "gender": "female",   "from": "Aaron"  },
        { "gender": "female",   "from": "Aaron"  }
    ]
};

Handlebars.registerHelper('each_when', function(list, k, v, opts) {
    console.log(arguments);
    var i, result = '';
    for(i = 0; i < list.length; ++i)
        if(list[i][k] == v)
            result = result + opts.fn(list[i]);
    return result;
});

Handlebars.registerHelper('get_length', function (obj) {
 return obj.length;
}); 


var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>

<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
    {{#each_when profile "gender" "female"}}
        {{from}} ({{gender}})<br> 
    {{/each_when}}
</script>

<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>

<script>
var json = {
    "profile": [
        { "gender": "female", "from": "Olivia" },
        { "gender": "female", "from": "Meagen" },
        { "gender": "female",   "from": "Aaron"  },
        { "gender": "female",   "from": "Aaron"  }
    ]
};

Handlebars.registerHelper('each_when', function(list, k, v, opts) {
    console.log(arguments);
    var i, result = '';
    for(i = 0; i < list.length; ++i)
        if(list[i][k] == v)
            result = result + opts.fn(list[i]);
    return result;
});

Handlebars.registerHelper('get_length', function (obj) {
 return obj.length;
}); 


var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>
</html>

结果：

奥利维亚（女）
Meagen（女）
亚伦（女）
亚伦（女）

但我只想要第一个：

奥利维亚（女）

另外，我使用 {{@ index}} 来显示数组索引，但它对我不起作用。我错过了什么吗？

Answer 1

将您的助手更改为：

Handlebars.registerHelper('each_when', function(list, k, v, opts) {
  var match = list.findIndex(function(item) {
    return (item[k] === v);
  });
  return (match >= 0) ? opts.fn(list[match]) : '';
});

您想要找到第一个匹配项并仅返回该匹配项的结果。

这里有完整的html工作，只显示第一场比赛：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>

<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
    {{#each_when profile "gender" "female"}}
    {{from}} ({{gender}})<br>
    {{/each_when}}
</script>

<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>

<script>
    var json = {
        "profile": [
            { "gender": "female", "from": "Olivia" },
            { "gender": "female", "from": "Meagen" },
            { "gender": "male",   "from": "Aaron"  },
            { "gender": "male",   "from": "Aaron"  }
        ]
    };

    Handlebars.registerHelper('each_when', function(list, k, v, opts) {
        var match = list.findIndex(function(item) {
            return (item[k] === v);
        });
        return (match >= 0) ? opts.fn(list[match]) : '';
    });

    Handlebars.registerHelper('get_length', function (obj) {
        return obj.length;
    });


    var t = Handlebars.compile($('#t').html());
    $('body').append(t(json));
</script>
</body>
</html>

＆＃13;

编辑扩展请求评论：

要获得每个独特性别的第一个人，您可以添加另一个帮助者：

Handlebars.registerHelper('each_unique', function(list, k, opts) {
  var foundKeys = {},
    results = '';
  list.forEach(function(item) {
    if (!foundKeys[item[k]]) {
      results = results + opts.fn(item);
      foundKeys[item[k]] = true;
    }
  });
  return results;
});

要使用此功能，请尝试使用此修订后的示例（其示例按gender显示唯一，from显示唯一。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
  </head>
  <body>

  <!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
  <p>With 'each_when':</p>
  {{#each_when profile "gender" "female"}}
    {{from}} ({{gender}})<br>
  {{/each_when}}
  <hr/>
  <p>With 'each_unique' on gender:</p>
  {{#each_unique profile "gender"}}
    {{from}} ({{gender}})<br>
  {{/each_unique}}
  <hr/>
  <p>With 'each_unique' on from:</p>
  {{#each_unique profile "from"}}
  {{from}} ({{gender}})<br>
  {{/each_unique}}
</script>

<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>

  <script>
var json = {
  "profile": [
    { "gender": "female", "from": "Olivia" },
    { "gender": "female", "from": "Meagen" },
    { "gender": "male",   "from": "Aaron"  },
    { "gender": "male",   "from": "Aaron"  }
  ]
};

Handlebars.registerHelper('each_when', function(list, k, v, opts) {
  var match = list.findIndex(function(item) {
    return (item[k] === v);
  });
  return (match >= 0) ? opts.fn(list[match]) : '';
});

Handlebars.registerHelper('get_length', function (obj) {
  return obj.length;
});

Handlebars.registerHelper('each_unique', function(list, k, opts) {
  var foundKeys = {},
    results = '';
  list.forEach(function(item) {
    if (!foundKeys[item[k]]) {
      results = results + opts.fn(item);
      foundKeys[item[k]] = true;
    }
  });
  return results;
});

var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>
</html>

＆＃13;

each_unique帮助器有点复杂，因为我们必须跟踪我们是否已报告此键值。我们通过提供一个foundKeys对象来执行此操作，该对象将记录它找到的每个唯一键值，从而防止它在forEach()的后续迭代中包含具有相同键值的更多结果。

我在我的项目中使用Handlebars。我想只显示数组中的第一个元素。我怎样才能做到这一点？

1 个答案: