Question

所以，我有这个网络应用程序，其中我使用hbs作为模板引擎。现在，从我的其余API我发送一个JSON对象数组：

 [{";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}]

我有一个变量：disklist，它有这个数据。

使用把手这是我到目前为止所尝试的，但它似乎不起作用。

  console.log(disklist[0].name); // LOGS THE NAME PROPERLY

  var source   = $("#dlist").html();
  var template = Handlebars.compile(source);
  var wrapper  = {objects: disklist};

在html中：

<script type='text/template' id='dlist'>
  <li>
   {{#each objects}}
        <h1>{{name}}</h1>
   {{/each}}
  </li>
</script>

但没有打印！

我该如何解决这个问题？

此外，如果有一种方法可以用简单的JavaScript做到这一点，请分享！

Answer 1

普通js：

var disklist = [
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]},
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate2","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]},
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate3","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}
];


document.getElementById('container').innerHTML = disklist.map(function(disk) {
  return '<li><h1>' + disk.name + '</h1></li>';
}).join('');

<ul id="container">
</ul>

不确定这是否是你想要的？

WALKTHROUGH ：我们创建一个元素并使其成为我们要渲染的容器。接下来我们将它的innerHTML设置为我们要创建的字符串。 disklist.map遍历disklist数组并使用字符串应用每个项目，在这种情况下为<li><h1>{{disk.name}}</h1></li>。您可以将内容更改为您喜欢的内容，它只是HTML。然后，我们使用.join('')将字符串数组连接成一个大字符串。最后，我们将innerHTML设置为我们刚刚创建的字符串dala。

Answer 2

您为模板使用了错误的类型。它应该是text/x-handlebars-template。我并非100％确定这很重要，但您应该与Handlebars' own documentation保持一致。

另外，我没有看到实际上呈现 HTML的行。要使用Handlebars，您需要两件事：编译模板和＆＃34; context＆＃34;。在定义上下文之后（这里我假设它是wrapper变量，它应该被命名为＆＃34; context＆＃34;），你需要像这样执行模板：

var renderedHTML = template(wrapper); // pass your compiled template the context
document.getElementById("container").appendChild(renderedHTML);
// you might have to use innerHTML = renderedHTML instead
// I forget if renderedHTML will be a string or DOM node
// For jQuery just use $("#container").append(renderedHTML);

您编译的模板会获取您提供的上下文并将其用作插入其自身的数据，并返回结果，以便您可以将其插入到页面中。

循环遍历一组json对象

2 个答案: