如何迭代 Handlebars 中的对象数组？

Posted 2023-02-22

【中文标题】如何迭代 Handlebars 中的对象数组？

【英文标题】：How to iterate over array of objects in Handlebars?

【发布时间】：2014-05-06 23:22:06

【问题描述】：

这似乎是一个愚蠢的问题，但我似乎无法在任何地方找到答案。

我正在使用这个返回 JSON 格式对象数组的 Web API：

Handlebars 文档显示了以下示例：

<ul class="people_list">
  #each people
  <li>this</li>
  /each
</ul>

在以下情况下：

  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]

在我的情况下，我没有数组的名称，它只是响应的根对象。我试过使用#each，但没有成功。

第一次使用 Handlebars...我错过了什么？

更新

这是一个简化的小提琴，向您展示我在问什么：http://jsfiddle.net/KPCh4/2/

车把是否要求上下文变量是对象而不是数组？

【问题讨论】：

如何将api结果传递给模板（当前）？

@GabyakaG.Petrioli API 不是我的，我无法控制它。我只是在使用 jQuery ajax 并获取响应对象，它是一个对象数组。

#each people this /each

【参考方案1】：

您可以将this 传递给每个块。见这里：http://jsfiddle.net/yR7TZ/1/

#each this
    <div class="row"></div>
/each

【讨论】：

那么可以在内循环#each this内调用外循环的索引号#each people吗？喜欢people@index

【参考方案2】：

这个小提琴既有each 也有直接的json。 http://jsfiddle.net/streethawk707/a9ssja22/.

以下是遍历数组的两种方式。一种是直接 json 传递，另一种是在传递给内容持有者时命名 json 数组。

Eg1：下面的例子是在small_data变量中直接调用json key(data)。

在 html 中使用以下代码：

<div id="small-content-placeholder"></div>

下面可以放在html的header或者body中：

<script id="small-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            #data
                <tr>
                    <td>username
                    </td>
                    <td>email</td>
                </tr>
            /data
        </tbody>
    </table>
</script>

以下文件已准备就绪：

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

下面是json：

var small_data = 
            data: [
                username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" ,
                username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" 
            ]
        ;

最后将json附加到内容持有者：

$("#small-content-placeholder").html(small_template(small_data));

Eg2：使用 each 进行迭代。

考虑下面的 json。

var big_data = [
            
                name: "users1",
                details: [
                    username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" ,
                    username: "allison1", firstName: "Allison", lastName: "House", email: "[e-mail]" ,
                    username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" 
                  ]
            ,
            
                name: "users2",
                details: [
                    username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" ,
                    username: "allison2", firstName: "Allison", lastName: "House", email: "[e-mail]" ,
                    username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" 
                  ]
            
      ];

在将 json 传递给内容持有者时，只需这样命名：

$("#big-content-placeholder").html(big_template(big_data:big_data));

模板看起来像：

<script id="big-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            #each big_data
                <tr>
                    <td>name
                            <ul>
                                #details
                                    <li>username</li>
                                    <li>email</li>
                                /details
                            </ul>
                    </td>
                    <td>email</td>
                </tr>
            /each
        </tbody>
    </table>
</script>

【讨论】：

如何使用 gulp 把手编译这个？

【参考方案3】：

我的意思是在template() 通话中..

您只需要将结果作为对象传递。所以不要调用

var html = template(data);

做

var html = template(apidata: data);

并在您的模板代码中使用#each apidata

在http://jsfiddle.net/KPCh4/4/进行演示 （删除了一些剩余的 if 崩溃代码）

【讨论】：

这很好，但 AZ 答案更好。使用#each this 是正确的形式。

确实，这种方式更有意义，谢谢！

【参考方案4】：

Handlebars 可以使用数组作为上下文。您可以使用. 作为数据的根。因此，您可以使用 #each . 循环遍历您的数组数据。

var data = [
  
    Category: "General",
    DocumentList: [
      
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General"
      ,
      
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General"
      
    ]
  ,
  
    Category: "Unit Documents",
    DocumentList: [
      
        DocumentName: "Document Name 1 - Unit Documents",
        DocumentList: "Document Location 1 - Unit Documents"
      
    ]
  ,
  
    Category: "Minutes"
  
];

$(function() 
  var source = $("#document-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#DocumentResults').html(html);
);

.row 
  border: 1px solid red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="DocumentResults">pos</div>
<script id="document-template" type="text/x-handlebars-template">
  <div>
  #each .
    <div class="row">
      <div class="col-md-12">
        <h2>Category</h2>
        #DocumentList
        <p>DocumentName at DocumentLocation</p>
        /DocumentList
      </div>
    </div>
  /each
  </div>
</script>

【参考方案5】：

我遇到了类似的问题，我在 this 中获取整个对象，但在执行 #each 时显示的值。

解决方案： 我像这样重新构造我的对象数组：

let list = results.map((item)=>
    return  name:item.name, author:item.author 
);

然后在模板文件中：

#each list
    <tr>
        <td>name </td>
        <td>author</td>      
    </tr>
/each 

【参考方案6】：

使用this 和this。请参阅 node.js 中的以下代码：

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>#each this<li>this</li>/each</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

控制台日志输出：

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>

【讨论】：

这个问题不是专门说对象数组，而不仅仅是数组，我不明白这个答案有什么帮助。