이것은 어리석은 질문처럼 보일지 모르지만 어디에서도 답을 찾을 수없는 것 같습니다.
JSON 형식으로 객체 배열을 반환하는이 웹 API를 사용하고 있습니다.
Handlebars 문서는 다음 예를 보여줍니다.
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
문맥 상에:
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
제 경우에는 배열 이름이 없으며 응답의 루트 객체 일뿐입니다. 나는 {{#each}}
운없이 사용해 보았습니다 .
핸들 바를 처음 사용하는 경우 … 무엇을 놓치고 있습니까?
최신 정보
다음은 내가 묻는 것을 보여주는 간단한 바이올린입니다. http://jsfiddle.net/KPCh4/2/
핸들 바는 컨텍스트 변수가 배열이 아닌 객체 여야합니까?
답변
this
각 블록에 전달할 수 있습니다 . 여기를 참조하십시오 : http://jsfiddle.net/yR7TZ/1/
{{#each this}}
<div class="row"></div>
{{/each}}
답변
이 바이올린에는 each
직접 json이 있습니다. http://jsfiddle.net/streethawk707/a9ssja22/ .
다음은 배열을 반복하는 두 가지 방법입니다. 하나는 직접 json 전달이고 다른 하나는 콘텐츠 홀더에게 전달하는 동안 json 배열의 이름을 지정하는 것입니다.
예 1 : 아래 예제는 small_data 변수 내에서 json 키 (데이터)를 직접 호출하는 것입니다.
HTML에서 아래 코드를 사용하십시오.
<div id="small-content-placeholder"></div>
아래는 html의 헤더 또는 본문에 배치 할 수 있습니다.
<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: "alan1@test.com" },
{username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan2@test.com" }
]
};
마지막으로 콘텐츠 홀더에 json을 연결합니다.
$("#small-content-placeholder").html(small_template(small_data));
Eg2 : 각각을 사용하는 반복.
아래 json을 고려하십시오.
var big_data = [
{
name: "users1",
details: [
{username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
{username: "allison1", firstName: "Allison", lastName: "House", email: "allison@test.com" },
{username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
]
},
{
name: "users2",
details: [
{username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
{username: "allison2", firstName: "Allison", lastName: "House", email: "allison@test.com" },
{username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
]
}
];
콘텐츠 보유자에게 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>
답변
내 말은 template()
..
결과를 객체로 전달하기 만하면됩니다. 그래서 전화하는 대신
var html = template(data);
하다
var html = template({apidata: data});
{{#each apidata}}
템플릿 코드에서 사용
http://jsfiddle.net/KPCh4/4/의 데모
( 충돌 한 일부 남은 if
코드 제거 )
답변
핸들 바는 배열을 컨텍스트로 사용할 수 있습니다. .
데이터의 루트로 사용할 수 있습니다 . 따라서 배열 데이터를 {{#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>
답변
사용 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>