Handlebars Helper返回数组,但呈现逗号分隔的字符串

亚伦

我要尝试使用引导面板按类别显示一组对象。为了获得数组中所有不同的类别,我创建了一个帮助器,该助手遍历该数组并返回一个包含所有不同类别的字符串数组。

这是我的两个助手:

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吗?

76484

您正在获取以逗号分隔的字符串,因为这是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这将允许您在执行操作时从助手中返回数组,然后将结果数组传递给现有的#eachBlock Helper。您的模板需要更改为以下内容:

{{#each (GetFamilies pieces)}}
    {{#each (GetFamilyPieces ../pieces this)}}

    {{/each}}
{{/each}}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

从Handlebars Helper返回对象数组

包含“.”的变量 Handlebars 中的字符?

AngularJS和Handlebars限制输出的字符串长度

Handlebars.compile 抛出异常“错误:您必须将字符串或 Handlebars AST 传递给 Handlebars.compile。你通过了 <html>...'

在Handlebars.js中引用数组项

使用Handlebars模板引擎传递JSON数组

遍历Handlebars.js中的多维数组

遍历每个Ember Handlebars中的数组

数组以逗号分隔的字符串?

PHP数组逗号分隔的字符串

逗号分隔字符串的多维数组

为什么 map 不返回新数组而是返回以逗号分隔的字符串

如何在Handlebars帮助器表达式中将字符串作为参数传递?

Sane在Handlebars.js帮助器参数中连接字符串和变量的方法?

Patternlab Handlebars 将数据变量作为字符串文字传递

Ember / Handlebars提供[object Object]而不是JSON对象中的字符串

如何从Ember.Handlebars.helper访问FIXTURES数据?

使用 each 和 handlebars helper 对对象键进行排序

返回以逗号分隔的前两个数组元素的字符串,该字符串的总和为30

如何处理 Ember Js Handlebars 中的对象数组

在无名对象或数组上实现handlebars.js的循环

如何在Handlebars循环中使用{{this}}访问数组内容?

如何访问Handlebars.js数组中的最终元素?

使用 handlebars.js 时出现奇怪的字符

逗号分隔的字符串

仅以值返回逗号分隔的字符串

C将逗号分隔的字符串转换为数组

为什么数组字符串用逗号分隔?

用逗号和字符串PHP分隔数组