Javascript Handlebar辅助程序返回数组但呈现逗号分隔字符串

我有一个对象数组，我正试图使用引导面板按类别显示这些对象。为了获得数组中的所有不同类别，我创建了一个助手，该助手在数组中循环，并返回一个包含所有不同类别的字符串数组

以下是我的两位助手：

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助手：

但不要点击GetFamilyPieces助手

我的呈现HTML如下所示：

<div id="toolbox-container">

    <div class="panel-group" id="toolbox-accordion">
Circuit,Component,Conductor    </div>


</div>

---

如您所见，它只是呈现数组包含的以逗号分隔的字符串。您知道为什么不呈现完整的html吗？

您将获得逗号分隔的字符串，因为这是JavaScript中的数组被.toString分隔时的结果

发件人：

对于数组对象，toString方法加入数组并返回一个 包含由逗号分隔的每个数组元素的字符串

这意味着[Circuit，Component，Conductor].toString将生成Circuit，Component，Conductor

调用帮助程序后未呈现模板的其余部分的原因是，帮助程序编写不正确。您应该返回一个包含要呈现的HTML的字符串。因为您的助手返回一个数组，所以将呈现该数组的toString。为了访问块辅助对象的内部模板，Handlebar提供了一个函数options.fn，您可以向该函数传递上下文数据对象。助手必须将数组参数中的每个项传递给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), '');
});

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

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

请注意，在GetFamilies块帮助器中，片段不一定存在于上下文数据中。您必须告诉Handlebar，要升级到上下文框架以查找路径为：../pieces的片段，请执行以下操作

另一种解决方案，而且根据您的助手的判断，它看起来像是您的目标，将是使用标准的非阻塞。这将允许您在执行操作时从辅助对象返回数组，然后将生成的数组传递给现有的每个块辅助对象。您的模板需要更改为以下内容：

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), '');
});

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

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

---

您将获得逗号分隔的字符串，因为这是JavaScript中的数组被.toString分隔时的结果

发件人：

对于数组对象，toString方法加入数组并返回一个 包含由逗号分隔的每个数组元素的字符串

这意味着[Circuit，Component，Conductor].toString将生成Circuit，Component，Conductor

调用帮助程序后未呈现模板的其余部分的原因是，帮助程序编写不正确。您应该返回一个包含要呈现的HTML的字符串。因为您的助手返回一个数组，所以将呈现该数组的toString。为了访问块辅助对象的内部模板，Handlebar提供了一个函数options.fn，您可以向该函数传递上下文数据对象。助手必须将数组参数中的每个项传递给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), '');
});

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

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

请注意，在GetFamilies块帮助器中，片段不一定存在于上下文数据中。您必须告诉Handlebar，要升级到上下文框架以查找路径为：../pieces的片段，请执行以下操作

另一种解决方案，而且根据您的助手的判断，它看起来像是您的目标，将是使用标准的非阻塞。这将允许您在执行操作时从辅助对象返回数组，然后将生成的数组传递给现有的每个块辅助对象。您的模板需要更改为以下内容：

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), '');
});

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

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

---

你的数据看起来像什么？你的数据看起来像什么？