我要尝试使用引导面板按类别显示一组对象。为了获得数组中所有不同的类别,我创建了一个帮助器,该助手遍历该数组并返回一个包含所有不同类别的字符串数组。
这是我的两个助手:
Handlebars.registerHelper("GetFamilies", function (array) {
var families = [];
for (var i = 0; i < array.length; i++) {
var item = array[i];
if (families.indexOf(item.Family) <= -1) {
families.push(item.Family);
}
}
console.log("====================Families");
console.log(families);
return families;
});
Handlebars.registerHelper("GetFamiliyPieces", function (array, familyName) {
var result = _.filter(array, function (obj) {
// return true for every valid entry!
return obj.Family == familyName;
});
console.log("====================Family Pieces");
console.log(result);
return result;
});
这是html:
<div class="panel-group" id="toolbox-accordion">
{{#GetFamilies pieces}}
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#toolbox-accordion" href="#{{this}}">
{{this}}
</a>
</h4>
</div>
<div id="{{this}}" class="panel-collapse collapse in">
<div class="panel-body">
{{#GetFamilyPieces pieces this}}
<div class="toolbox_item" data-type="{{TypeName}}" data-type-id="{{TypeID}}" title="{{TypeDescription}}" data-input-count="{{Length Inputs}}" data-output-count="{{Length Outputs}}">
<span id="line"></span>
<div class='typename'>{{ShortName TypeName}}</div>
</div>
{{/GetFamilyPieces}}
</div>
</div>
</div>
{{/GetFamilies}}
</div>
在控制台中,我点击了GetFamilies Helper:
但是不要点击GetFamilyPieces助手。
我呈现的HTML如下所示:
<div id="toolbox-container">
<div class="panel-group" id="toolbox-accordion">
Circuit,Component,Conductor </div>
</div>
如您所见,它只是呈现数组包含的逗号分隔字符串。您知道为什么不呈现完整的html吗?
您正在获取以逗号分隔的字符串,因为这是JavaScript中的数组为.toStringed时的结果。
从MDN:
对于Array对象,toString方法连接该数组并返回一个字符串,其中包含用逗号分隔的每个数组元素。
这表示["Circuit", "Component", "Conductor"].toString()
结果为"Circuit,Component,Conductor"
。
调用帮助程序后未呈现其余模板的原因是因为您的帮助程序编写不正确。您的块帮助器应返回一个字符串,其中包含要呈现的HTML。由于您的助手返回一个数组,因此toString()
将呈现该数组的。为了访问Block Helper的内部模板,Handlebars提供了一个函数,options.fn
您可以将上下文数据对象传递给该函数。您的助手必须将array参数中的每个项目传递给options.fn
函数并加入结果。一个有效的实现如下所示:
Handlebars.registerHelper("GetFamilies", function (array, options) {
return array
.reduce((memo, el) => {
if (memo.indexOf(el.Family) === -1) {
memo.push(el.Family);
}
return memo;
}, [])
.reduce((memo, family) => memo += options.fn(family), '');
});
Handlebars.registerHelper("GetFamilyPieces", function (array, familyName, options) {
return array
.filter(el => el.Family === familyName)
.reduce((memo, el) => memo += options.fn(el), '');
});
请注意,在您的#GetFamilies
块帮助器中,pieces
上下文数据中不一定存在。您必须告诉Handlebars加强上下文框架以查找pieces
路径:../pieces
。
根据您的助手的判断,一种替代的解决方案是使用标准的(非块式)Handlebars Helper。这将允许您在执行操作时从助手中返回数组,然后将结果数组传递给现有的#each
Block Helper。您的模板需要更改为以下内容:
{{#each (GetFamilies pieces)}}
{{#each (GetFamilyPieces ../pieces this)}}
{{/each}}
{{/each}}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句