Question

我正在尝试实现一个Handlebars帮助程序，它将接收一些数据，并根据该数据生成一个列表。在帮助器方法中生成列表后，我想循环此列表。在示例中将会很清楚。

场景是：我有一些数据，当我解析数据时，我想为该数据的不一致性创建一些自定义警告。负责从原始JSON数据生成警告的方法称为generateWarnings()。

我有编译模板和渲染数据的函数，定义如下：

function compileTemplate(targetId) {
    return Handlebars.compile($("#" + targetId).html());
}

function renderData(template, context, targetId) {
    $("#" + targetId).html(template(context));
}

我打电话给他们：

var warningsPlaceHolderId = "warnings_plholder";
var warningsTemplateId = "warnings_template";

var warningsTemplate = HandlebarsHelpers.compileTemplate(warningsTemplateId);
renderData(warningsTemplate, data, warningsPlaceHolderId);

把手模板：

<ol>
    {{#each generateWarnings this}}
        Warning description: {{this.text}}
    {{/each}}
</ol>

此处，generateWarnings助手应该获取我的原始JSON数据，创建实际的警告列表，并将每个警告显示为 HTML列表中的元素。

我注册了帮助者：

    Handlebars.registerHelper('generateWarnings', function(data) {
        return generateWarnings(data);
    });

generateAll: function(data) {
    var warning1 = {
        type: 'error',
        text: 'Testing error!'
    };

    var warning2 = {
        type: 'warning',
        text: 'Testing warning!'
    };

    var warning3 = {
        type: 'info',
        text: 'Testing info'
    };

    var arr = [];
    arr.push(warning1);
    arr.push(warning2);
    arr.push(warning3);

    return arr;
}

所以我希望这3个警告的text属性在列表中，但我得到一个错误：

未捕获的TypeError：inverse不是renderData（）中的函数。

Answer 1

不应该在你的助手中使用generateAll()吗？

Handlebars.registerHelper('generateWarnings', function(data) {
        return generateWarnings(data);   // THIS SHOULD BE generateAll(data)??
    });

generateAll: function(data) {

另外，你正在使用标签？！因为你的功能不会像你期望的那样被调用。

此：

generateAll: function(data) { ... };

应该是：

var generateAll = function(data ) { ... };

我从来没有在JavaScript中看到过很好用的标签。

你的方法似乎也有点不寻常（而且过于复杂）。为什么不在将数据传递给模板之前对其进行操作？我会考虑使用JavaScript生成警告，然后在传递给模板之前将它们附加到您的数据中。在这种情况下，我没有看到使用Handlebars助手的特殊原因（我承认，我并不完全熟悉您要解决的问题）。

帮助方法生成列表

1 个答案: