Question

＆＃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" "male"}}
        {{ID}}. {{from}} {{gender}}<br>
    {{/each_when}}
</script>

<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>

<script>
var json = {
    "profile": [
        { "ID": 1,  "gender": "male", "from": "Olivia" },
        { "ID": 2, "gender": "male", "from": "Meagen" },
        { "ID": 3,  "gender": "female, male",   "from": "Aaron" },
        { "ID": 4,  "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;
});

var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>
</html>

＆＃13;

上述代码的结果是：

1. Olivia male
2. Meagen male

但我想要以下内容：

1. Olivia male
2. Meagen male
3. Aaron male

我正在通过属性过滤对象数组，该属性是一个可以包含多个值的字符串。

有没有人可以告诉我为什么3. Aaron male没有出现？

Answer 1

ID 3 gender的对象不会附加到您的结果中，因为您的帮助程序正在过滤掉"male"属性不等于gender的对象。对象3的"female, male"是list[i][k]，因此它不通过相等测试。

如果您想检查v 是否包含 var i, result = '', values; for (i = 0; i < list.length; ++i) { values = list[i][k].replace(/\s*,\s*/, ',').split(','); if (values.indexOf(v) > -1) { result += opts.fn(list[i]); } } return result;，那么您必须更新逻辑。

values

请注意，在分割之前，我使用正则表达式删除“，”旁边的空白字符 - 这样我就可以确保1. Olivia male<br> 2. Meagen male<br> 3. Aaron female, male<br>数组中的元素不以空格开头或结尾。

此更新会将“Aaron”对象附加到输出。但是，最终结果将是：

gender

如果您不希望“女性，男性”显示为Aaron，则表示您并不真正想要渲染对象的{{ID}}. {{from}} male<br>属性。相反，您应该将您想要的文本硬编码到模板中：

local.properties

如何使用handlebars.js的值过滤此数组？

1 个答案: