把手每个句子不循环

Question

我有这个模板

<table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">Nombre del foro</th>
        </tr>
    </thead>
    <tbody>

        {{#each data}}
        <tr>
            <th scope="row">{{ id }}</th>
            <td>{{name}}</td>
        </tr>
        {{/each}}

    </tbody>
</table>

使用此输入数据

[
{"id":1,"name":"Foro general"},
{"id":2,"name":"Otro foro"},
{"id":14,"name":"Nuevo foro"},
{"id":15,"name":"Nuevo foro"},
{"id":16,"name":"Nuevo foro"},
{"id":17,"name":"Nuevo foro"},
{"id":18,"name":"Nuevo foro"}
]

输出是这个

<table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">Nombre del foro</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我不知道为什么JSON被视为对象的空数组。 有什么想法我想念什么吗？

编辑2：删除不必要的混乱代码

forumListTemplate(data){
    var forumListTemplate = 
    `
    <table class="table">
        <thead>
            <tr>
            <th scope="col">#</th>
            <th scope="col">Nombre del foro</th>
            </tr>
        </thead>
        <tbody>
            {{#each data}}
            <tr>
                <th scope="row">{{ id }}</th>
                <td>{{name}}</td>
            </tr>

            {{/each}}
        </tbody>
    </table>
    `
    var forumListCompiled = compile(forumListTemplate);
    var forumListHTML = forumListCompiled(data);
    return forumListHTML;
}

我检查了结果是否返回上述输入数据

Answer 1

尝试将具有字段data的对象传递给已编译的模板。

var forumListCompiled = compile(forumListTemplate);
var forumListHTML = forumListCompiled({data: data});
return forumListHTML;

Answer 2

对于您或其他任何人查看这个问题有什么用（如果您承诺使用Handlebars，则可能什么也没有），您不需要第三方库即可在现代JavaScript中完成此操作。您可以只使用template strings。

我知道您最初的问题是关于如何使用把手的，但是也许这对您现在或以后的工作很有用。优点是，无需导入外部库并增加应用程序的大小：

const inputData = [
  {"id": 1, "name": "Foro general"},
  {"id": 2, "name": "Otro foro"},
  {"id": 14, "name": "Nuevo foro"},
  {"id": 15, "name": "Nuevo foro"},
  {"id": 16, "name": "Nuevo foro"},
  {"id": 17, "name": "Nuevo foro"},
  {"id": 18, "name": "Nuevo foro"}
]

function forumListTemplate(data){
    const trs = data.map(entry => (
            `<tr>
              <th scope="row">${entry.id}</th>
              <td>${entry.name}</td>
             </tr>`
             )
    )
    
    return `<table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Nombre del foro</th>
                </tr>
              </thead>
              <tbody>
                ${trs}
              </tbody>
            </table>`
}

console.log(forumListTemplate(inputData));