如何使用带对象数组的对象的handlebars #each调用？
Handlebars是一种JavaScript模板引擎，可以用于动态生成HTML。它提供了一种简洁的语法来处理数据和模板的结合。在Handlebars中，可以使用#each来遍历对象数组。
使用带对象数组的对象的Handlebars #each调用的步骤如下：
- 准备数据：首先，你需要准备一个包含对象数组的对象。例如，假设你有一个名为"users"的对象，其中包含一个名为"list"的数组，数组中的每个元素都是一个包含"name"和"age"属性的对象。
- 准备模板：接下来，你需要准备一个Handlebars模板，用于定义如何渲染数据。在模板中，你可以使用{{#each}}来遍历对象数组，并使用{{this}}来引用当前遍历的元素。
- 例如，你可以创建一个模板如下：
- 例如，你可以创建一个模板如下：
- 编译模板：使用Handlebars编译器，将模板编译为可执行的JavaScript函数。你可以使用Handlebars库提供的compile方法来完成这一步骤。
- 例如，你可以使用以下代码编译模板：
- 例如，你可以使用以下代码编译模板：
- 渲染模板：将编译后的模板与数据结合，生成最终的HTML代码。你可以调用编译后的模板函数，并将数据作为参数传递给它。
- 例如，你可以使用以下代码渲染模板：
- 例如，你可以使用以下代码渲染模板：
- 渲染后的HTML代码将包含遍历对象数组的结果，每个元素都将按照模板中定义的方式进行渲染。
Handlebars是一种非常灵活和强大的模板引擎，可以方便地处理对象数组的遍历和渲染。它在前端开发中广泛应用于动态生成页面、列表渲染等场景。
腾讯云提供了Serverless云函数（SCF）服务，可以用于快速部署和运行无服务器的应用程序。你可以使用SCF来托管和运行Handlebars模板，实现动态生成HTML的功能。你可以通过腾讯云的SCF产品介绍了解更多信息：腾讯云Serverless云函数（SCF）。
相关·内容
我正在使用PHP后端，Backbone.js和Handlebars.js。我的javascript请求数据，成功返回JSON数据(json_encode)。
当我将此JSON数据提供给handlebars模板时，它没有显示。我意识到我的JSON对象前面和后面的方括号是Handlebars.js“不喜欢的”，并且没有显示出来。看一下下面的代码。
var ArticleListView = Backbone.View.extend(
{
el: $('#main'),
render: function()
{
var template = Handlebars.
浏览 1提问于2011-09-08得票数 2
回答已采纳
我想要解析从handlebars中的url获得的JSON数据。我尝试的是从url获取JSON数据。我将其定义为数据对象。我想知道如何使用handlebars.js解析数据，我是handlebars.js的新手，有没有其他方法可以让我们不用定义每个属性就能解析数据？因为我的JSON数据非常庞大。例如。
reportData = {
inquiryId= data.data[0].inquiryId;
}
HTML代码：
<script id="address-template" type="text/x-handlebars-template"
浏览 1提问于2017-09-21得票数 0
1回答
我有JSON对象：
{
groups: [
{id: 1, title: "group1"},
{id: 2, title: "group2"},
],
users: [
{id:1, login: "user1", groupId: 1},
{id:2, login: "user2", groupId: 2},
{id:3, login: "user3", groupId: 1}
]
}
和handle
浏览 0提问于2015-01-03得票数 3
1回答
我有一个JArray，它包含一个对象数组。我使用handlebars.net来绑定模板中的数据。
在getReportDetails变量中，我得到了以下格式的对象数组
[
{
"index": 1,
"Name": "Adam",
},
{
"index": 2,
"Name": "Sdam",
}
];
var template = Handlebars.Compile(source);
_logger.Info(getReportDetails);
var getdata = template
浏览 8提问于2022-11-22得票数 0
已经经历过这样的解决方案(还有更多)，但没有结果：
鉴于此：
feeds: [
{
name: "Guardian",
data: "empty"
},
{
name: "TechCrunch",
data: [
{
"title": "Instagram is testing screenshot alerts for stories",
浏览 2提问于2018-02-12得票数 1
2回答
我将返回以下JSON对象
{"status":"success",
"valmessage":"Your message has been sent successfully.",
"postcontent":{
"post_author":1,
"post_recipient":"1",
"post_title":"handle test 2",
"post_type":"wp_
浏览 1提问于2014-03-18得票数 10
回答已采纳
我正在阅读ember.js指南来学习Ember，并且我正在使用、和handlebars.js的最新版本。我能够成功地设置一个在视图之间切换的基本导航。但是，在尝试将模型与映射集成时，我收到一条错误消息:未捕获TypeError: Object # has no method 'map‘
很多人似乎都问了一个相关的问题，但解决方案一直是更新ember的版本，我已经这样做了。
我相信我已经完全遵循了教程，到目前为止我的代码如下所示。
App = Ember.Application.create();
App.Store = DS.Store.extend({
revision:
浏览 0提问于2013-05-25得票数 1
回答已采纳
我正在尝试实现Spine.js文档中给出的Todo示例，如下所示：
只是我想用车把来代替jQuery.tmpl。我使用的是Handlebars1.0.rc.1
但是，当我尝试调用：
template: Handlebars.compile($('#history-template').html()),
render: function(){
var t = this.template(this.item);
this.replace(t);
return this;
}
Handlebar在this.template(this.item)抛出异常
Un
浏览 2提问于2012-12-01得票数 8
2回答
我正在尝试用handlebars.js创建一个动态表。我想放入表中的一个对象的示例如下：
Object { title: "The Room", director: "Tommy Wiseau", genre: "Drama?", rating: "1"}
我想看起来像这样的HTML：
<thead>
<th>Title</th>
<th>Director</th>
<th>Genre</th>
<th
浏览 7提问于2017-05-16得票数 7
1回答
我是第一次在把手周围进行黑客攻击；我的目标是在html中显示一个项目列表。
这是html中的脚本：
<div>
<script id="list-items" type="text/x-handlebars-template">
{{#each list}} {{ price }} {{/each}}
</script>
</div>
这是js文件：
var list = [
{
name: 'Almond Toe Court Shoes, Pa
浏览 2提问于2015-09-15得票数 3
回答已采纳
2回答
如果这是一个多余的问题，请让我知道，并指出我在那里，但我没有找到确切的问题/答案组合或两者的混合。
我在jquery中有一些从php页面调用函数的ajax。如果没有这些把手，json数据会返回得很好。这里没有问题。但是，我似乎无法让ajax将我的结果写到handlebars模板中。下面是我现在拥有的代码：
$.ajax({
type: "post",
url: "../includes/db_functions.inc.php",
data: ({ p : p, p2 : p2, f : f }),
dataType: "json
浏览 0提问于2013-04-09得票数 1
回答已采纳
1回答
我有一个带数据的数组，当我试图用handlebar模板编译它时，在获取“options.fn”的值时，我得到的错误是"var fn =options.inverse，inverse =column；- option is undefined“。有人能告诉我这里漏掉了什么吗？
testData = [
title : 'text1',
values : {column: [0, 0, 0]}
]
<table>
{{#each}}
<tr>
<td>{{title }}</td>
{{#e
浏览 0提问于2012-08-24得票数 1
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http:
浏览 1提问于2013-08-28得票数 1
回答已采纳
1回答
我有一个对象，我想让handlebars处理它
stock= [
{
trailer: "TT6565",
usual : "Jack",
group : "Mercs"
},
{
trailer: "TT6589",
usual : "Paul",
group : "Mercs"
}
]
这是一个示例，但在我的脚本中，对象是从ajax请求创建的。
这是我的handlebars脚本
<script id="mwl707" type="t
浏览 0提问于2013-03-14得票数 1
回答已采纳
如果我从以下几个方面开始：
<script type="text/x-handlebars" id="Parent">
<p>Name: {{input type="text" value=name}}</p>
<button {{action 'addChild'}}>Add Child</button>
</script>
我想点击这个按钮来生成以下内容：
<script type="text/x-handlebars" id
浏览 1提问于2015-03-08得票数 0
回答已采纳
嗨，这段代码对Handlebar.js来说非常好。如何通过c#/HandleBars.net显示密钥/属性？
{{#each myObject}}
{{#if this.length}}
<b>{{@key}}</b>
{{#each this}}
<li>{{this}}</li>
{{/each}}
<br>
{{/if}}
{{/each}}
浏览 9提问于2016-04-25得票数 1
2回答
var express = require('express');
var router = express.Router();
var data = {
curreny :{
name:'United States dollars',
abbrev:'USD'
},
tours:[
{name: 'Hood River' , price:'100'},
{name: 'Sri lanka' , price:'150'},
浏览 1提问于2017-07-07得票数 0
有任何方法来获得当前迭代的对象在把手吗？
代码：
<script id="HandleBarTemplate1" type="text/x-handlebars-template">
{{#each objArr}}
<img src="{{objField1}}"/>
<strong>Name:</strong> {{objField2}}
<input type="button" onclick="processObject({{.}});"/>
{{
浏览 1提问于2012-10-03得票数 5
我似乎无法找到这一错误的根源：
断言失败:没有为“0”找到任何模型
服务器正在获取JSON，但是应用程序在被发送到模板之前会出错。这个问题似乎发生在REST适配器和路由器之间。当我使用夹具适配器时，模板呈现无错误。
我使用的是Ember和车把1.0.0版本。
这是我的应用程序代码：
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://localhost:3000'
});
App.Router.map(f
浏览 2提问于2013-09-05得票数 13
回答已采纳
2回答
我试图构建一个简单的列表，并将附件小部件作为Emberjs组件。
下面是我使用的代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"&g
浏览 7提问于2013-09-28得票数 5
回答已采纳
我正在尝试循环处理handlebars中的计算属性数组。在本例中，我可以对普通数组执行此操作，但不能对计算数组执行此操作：
在handlebars中循环计算属性的正确语法应该是什么？
浏览 0提问于2012-03-13得票数 4
回答已采纳
1回答
每个块帮助器
、、
我在使用Handlerbars.js中的每个块帮助器时遇到了问题
<html>
<head>
<script>
</script>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
{{#each people}}
<p>{{firstName}} &a
浏览 1提问于2013-02-15得票数 0
回答已采纳
3回答
我想观察一下将元素添加到数组中。下面是测试程序。
<!-- library load -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E
浏览 3提问于2012-02-29得票数 14
回答已采纳
我试图建立一个简单的类别浏览器与烬。我有两个非常简单的观点。当用户访问/时，他们将看到所有类别的列表，当他们单击该列表中的某个类别时，他们将被定向到#/10，其中10是id。
我的问题是，当用户单击/路由上的某个类别时，我将得到以下错误
TypeError: arrangedContent.addArrayObserver is not a function
[Break On This Error]
didChange: 'arrangedContentArrayDidChange'
如果我在#/10路由上刷新页面，就会对后端/api/categories?paren
浏览 2提问于2013-03-11得票数 3
我刚接触handlebars，我想知道如何将自定义帮助器作为上下文传递给视图模板(如果可能的话)？情况是:我有一个由5个元素组成的数组和一个带有5个标记的模板，我希望以这样的方式呈现模板，使其与传递的数组顺序一致。例如:如果我将数组作为2,1,3,4,5传递，那么我希望div按照这个顺序呈现；即第二个div，然后是第一个div，然后是第三个div，然后是第四个div，最后是第五个div。我在控制器文件中将helper函数声明为
Handlebars.RegisterHelper('check',(a,b)=>{
return a.toString()===b
浏览 1提问于2021-05-09得票数 0
2回答
我们有一个项目列表，我们希望使用handlebars模板呈现这些项目，以便每对项目都包装在一个div中。以下是JSON数据结构的示例：
var exampleData = [
{ Label : "Apple" },
{ Label : "Banana" },
{ Label : "Cherry" },
{ Label : "Damson" },
{ Label : "EggPlant"},
{ Label : "Fig" },
{ Label
浏览 4提问于2014-09-13得票数 0
1回答
我使用handlebars在html中显示一组javascript数组。
javascript数组如下所示
[{pid:"1mn0wZj6yN", id:"yUjCaVzZ3CcCdOj"},{pid:"uEG9LXUaZi", id:"0eamlmJAFd2Ltwd"}]
发出jquery get请求以获取此数组
$.get( "file.php", function( respo ) {
var temmple = Handlebars.compile($('#template')
浏览 2提问于2013-12-31得票数 0
我对{{#each}}块中的作用域感到困惑。
如果我有handlebars脚本
<script type="text/x-handlebars">
{{#each vars}}
<button {{action foo}}> {{name}} </button>
{{/each}}
</script>
并且我将应用程序控制器设置为
App.ApplicationController = Ember.Controller.extend({
vars: Ember.ArrayControll
浏览 0提问于2013-02-01得票数 2
回答已采纳
1回答
我有一个使用老式XMLHttpRequest从获取JSON数组的工具栏模板。下面是这方面的工作代码。但是我来自Firebase的JSON看起来不一样，如下所示：。我的每个条目都有一个键，而LearnWebCode只是一个数组。我的还缺少父键(“Projects”)，这进一步使转换复杂化。我在想，这可能是由于const dbRefObject = firebase.database().ref().child('Projects');的一行(见下面我发布了我尝试的javascript)
handlebars-project.js:老式XMLHttpRequest
var ourR
浏览 0提问于2017-03-10得票数 1
1回答
我想以x行/x列的方式通过把手显示数据。
下面是我在工具栏中的示例数据和代码，根据section1中的行数和列数，我希望遍历项目。
{{each}}在这里不是最好的，因为我不能退出循环。因此，我希望在列结束时立即遍历列的循环，它应该再次开始读取行。
下面的代码片段当然不起作用。
var data = {
"section1" : {
"columns" : "2",
"comment" : "This is a comment for the section",
浏览 5提问于2017-01-16得票数 1
回答已采纳
我知道each和collection帮助器方法是迭代我的handlebars模板中的项列表的两种可能方法。我正在寻找一些实用的建议，关于何时使用each或collection，以及这两种方法之间的区别。
浏览 0提问于2012-09-20得票数 13
回答已采纳
我开始使用工具栏和架构模式模型视图( ViewModel )，我和我编写了以下代码：
var data = {
currentPlayer: this._model.currentPlayer,
line: [
{
row:
[
{
caseNumber:1,
caseValue: this._model.getCaseState(0,0)
浏览 1提问于2016-11-26得票数 0
回答已采纳
我有基于mandrill的电子邮件模板的把手，并试图从列表列表中呈现JSON数据，其中每个列表可以有多达3个项目。对于每个内部列表handlebars迭代，它应该检查是否在索引0,1,2处有任何东西，如果有，对它们做一些事情，如下所示：
{{#each thing}}
{{#if this.thing.[0]}}
Do something here
{{/if}}
{{#if this.thing.[1]}}
Do something here
{{/if}}
{{#if this.thing.[2]}}
浏览 1提问于2016-02-26得票数 1
在成员组件中，如何在模板中生成6件东西，给出一个名为num的值为6的组件属性？
为了在组件中创建数组，我必须创建数组吗？如果是这样的话，有人能建议最可重用的方法来做到这一点吗？
我想我需要通过一个助手来做这件事：
Ember.Handlebars.helper('highlight', function(value, options) {
var escaped = Handlebars.Utils.escapeExpression(value);
return new Ember.Handlebars.SafeString('<span class=&#
浏览 3提问于2015-02-02得票数 1
回答已采纳
我有一个handlebars.js模板，就像这样：
{{externalValue}}
<select name="test">
{{#each myCollection}}
<option value="{{id}}">{{title}} {{externalValue}}</option>
{{/each}}
</select>
这是生成的输出：
myExternalValue
<select name="test">
<opti
浏览 0提问于2012-11-30得票数 211
回答已采纳
1回答
我有一个我用车把做的模板，看起来像这样：
<script type="text/x-handlebars-template" id="student-template">
{{#students}}
<div class="clearfix">
{{#each student}}
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
&l
浏览 2提问于2016-12-25得票数 0
我正在将handlebars.js用于我的模板引擎，并希望仅当它是模板配置对象中包含的数组中的最后一项时才显示条件段。
{
columns: [{<obj>},{<obj>},{<obj>},{<obj>},{<obj>}]
}
我已经引入了一个助手来做一些等于/大于/小于的比较，并且已经成功地以这种方式识别了初始项，但没有幸运地访问我的目标数组的长度。
Handlebars.registerHelper('compare', function(lvalue, rvalue, options) {...})
&#
浏览 1提问于2012-07-14得票数 80
回答已采纳
2回答
我可以在Ember对象中包含一个数组，并使用Handlebar显示内容。但是，我只能使用set()替换数组内容。如何使用push/pop/等修改数组内容，并仍然更新UI绑定？
// JS
App.obj = Ember.Object.create({
"things": ["1", "2"],
});
App.obj.set("things", ["1", "2", "3"]); // Works
App.obj.things.push("3"); // Do
浏览 1提问于2012-01-30得票数 36
回答已采纳
我在我的一个模板中使用{{ render }} handlebars helper来(尝试)在同一页面上呈现另一条路线的模板。举个例子：
<script type="text/x-handlebars" data-template-name="index">
{{#each model}}
{{name}}<br />
{{/each}}
{{render "people"}}
</script>
<script type="text/x-handlebars" data-te
浏览 1提问于2013-06-14得票数 0
我已经成功地创建了一个帮助器和函数，它们使用handlebars.But在样式列表中显示来自json文件的数据。我正在努力处理我的code.Basically的view more部分。我想要实现的是，如果用户单击一个列表项，handlebars应该获取该项的id并将其显示在不同的page.My控制台上正确地显示新页面(视图详细信息页)上单击的每个项的正确id，但是页面只显示样式，而没有来自my json.This的内容是我的handlebars代码：
function getParameterByName(name,url){
'use strict';
if
浏览 5提问于2017-02-12得票数 0
我有一个handlebars.js的codeigniter项目，我有一个页面(page.template.html)，通过codeigniter api，我在页面内传递lang变量，当使用带数组的handlebars进行循环时，我不能使用lang变量，因为它将从数组中获得
是否有任何东西可以避免从数组中获取..或任何其他解决方案？
在下面的代码中..数组是( orgLang )，(这)是数组的元素:orgLang= 'ar‘，'en’
和lang变量是(details.slug)
{{#each orgLang}}
<a class="dropdown-
浏览 9提问于2019-03-25得票数 2
下面是完整的代码。
HTML部件：
<script id="company_template" type="text/x-handlebars-template">
{{#each CDataMap}}
<div>{{this}}</div>
{{/each}}
<p></p>
</script>
JS部件
var source = $("#company_template").html();
var templa
浏览 1提问于2014-01-22得票数 1
我使用handlebars作为模板，当我写{{ user }}时，我得到了显示所有键值对的完整用户对象，但当我写{{user.name}}时，它返回一个空值。知道是怎么回事吗？
浏览 25提问于2020-05-10得票数 0
我正在使用Ember，Ember Data和Handlebar来显示包含许多不同类型模型的时间线。我目前的实现虽然运行正常，但似乎可以通过约定和帮助器进行极大的改进。但是，我不知道如何使用已经定义好的模板。
这就是我所拥有的：
{{#view App.AccountSelectedView contentBinding="App.selectedAccountController.everythingSorted"}}
{{#with content}}
<ol class="timeline">
{{#each this}}
浏览 0提问于2012-01-12得票数 5
1回答
我有一个对象数组，我试图使用引导面板在类别中显示这些对象。为了获取数组中的所有不同类别，我创建了一个助手，它遍历数组并返回包含所有不同类别的字符串数组。
这是我的两个助手：
Handlebars.registerHelper("GetFamilies", function (array) {
var families = [];
for (var i = 0; i < array.length; i++) {
var item = array[i];
if (families.indexOf(item.Family) &
浏览 3提问于2016-09-16得票数 1
回答已采纳
2回答
我正在了解Handlebars.js，我想向社区提出一个问题。我知道我还有很多东西要学，我正在路上，但我想看看这个问题的一个例子。
在JS中创建的带有对象的数组：
var data =
[
{
Field: "id",
Type: "int(11)",
Null: "NO",
Key: "PRI",
Default: null,
Extra: "auto_increment"
},
{
Field: "id2",
Type: "
浏览 4提问于2014-01-13得票数 3
回答已采纳
我正在尝试从ajax调用中获取htmls的名称列表，然后为每个html调用另一个ajax调用，然后尝试使用handlebar附加它。但这不会发生在下面的代码中。有人能帮我调试一下吗：
$.getJSON('api/filterTemplate/' + pageName.page, function (data) {
var promises = [];
$.each(data, function (i, rec) {
promises.push($.get('commonCore/templates/' + rec.templat
浏览 1提问于2013-11-26得票数 0
1回答
我有一个类似如下的Rust结构： struct Root{
as: Vec<A>,
}
struct A {
bs: Vec<B>,
cs: Vec<C>,
}
struct B {
strings: Vec<String>,
}
struct C {
strings: Vec<u32>,
} 我正在尝试使用Rocket.rs和Handlebar模板来获取输出。 我的handlebars模板目前看起来是这样的，但它不能工作。 {{#each as}}
{{#each bs}}
浏览 17提问于2020-10-12得票数 3
回答已采纳
在阅读了几个教程之后，我正在学习工具栏，并使用下面的代码。下面，如果我不使用关键字this，我的代码就不能工作；我尝试了{{#each shoesData}}，但是我的{{#each shoesData}}没有发生任何变化。如果我不想使用this，那么只有当我将shoesData更改为JS示例2(遵循另一个教程中使用对象名称和而不是 this关键字的示例)并在模板中编写{{#each shoes}}时，它才能工作。有什么关系呢？
<h3>The List of Shoes:</h3>
<ul class="shoesNav"><
浏览 3提问于2017-02-10得票数 0
回答已采纳
我想对一个不是数组的对象使用handlebars #each。
我该怎么做？我需要它仍然与#each的流星的特殊功能一起工作。
我的对象的形式是：
{
john: "hello",
bob: "hi there"
}
我正在尝试获得如下输出：
<div>hello</div>
<div>hi there</div>
浏览 0提问于2013-02-23得票数 21
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
