Jak iterować nad tablicą obiektów w kierownicy?
To może wydawać się głupie pytanie, ale nigdzie nie mogę znaleźć odpowiedzi.
Uderzam w to Web Api, które zwraca tablicę obiektów w formacie JSON:
Instrukcja obsługi pokazuje następujący przykład:
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
W kontekście:
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
W moim przypadku nie mam nazwy tablicy, jest to tylko główny obiekt odpowiedzi. Próbowałem używać {{#each}}
bez powodzenia.
Pierwszy raz za kierownicą... czym jestem zaginęła?
UPDATE
Oto uproszczone skrzypce, aby pokazać, o co Proszę: http://jsfiddle.net/KPCh4/2/
Czy handlebars wymaga, aby zmienna kontekstowa była obiektem, a nie tablicą?
5 answers
Możesz przekazać this
do każdego bloku. Zobacz tutaj: http://jsfiddle.net/yR7TZ/1/
{{#each this}}
<div class="row"></div>
{{/each}}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 14:30:34
Ten skrzypek ma zarówno each
, jak i bezpośredni json. http://jsfiddle.net/streethawk707/a9ssja22/.
Poniżej znajdują się dwa sposoby iteracji tablicy. Jednym z nich jest bezpośrednie przekazywanie json, a innym jest nazywanie tablicy json podczas przekazywania do posiadacza zawartości.
Eg1: poniższy przykład bezpośrednio wywołuje klucz json (data) wewnątrz zmiennej small_data.
W html użyj poniższego kodu:
<div id="small-content-placeholder"></div>
Poniżej można umieścić w nagłówku lub treści 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>
Poniżej znajduje się dokument gotowy:
var small_source = $("#small-template").html();
var small_template = Handlebars.compile(small_source);
Poniżej znajduje się json:
var small_data = {
data: [
{username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
{username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }
]
};
Na koniec Dołącz json do posiadacza treści:
$("#small-content-placeholder").html(small_template(small_data));
Eg2: iteracja przy użyciu każdego.
Rozważ poniższy json.
var big_data = [
{
name: "users1",
details: [
{username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
{username: "allison1", firstName: "Allison", lastName: "House", email: "[email protected]" },
{username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
]
},
{
name: "users2",
details: [
{username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
{username: "allison2", firstName: "Allison", lastName: "House", email: "[email protected]" },
{username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
]
}
];
Przekazując json właścicielowi zawartości po prostu nazwij go w ten sposób:
$("#big-content-placeholder").html(big_template({big_data:big_data}));
A szablon wygląda następująco:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 14:30:07
Miałem na myśli telefon..
Wystarczy przekazać wyniki jako obiekt. Więc zamiast wywoływać
var html = template(data);
Do
var html = template({apidata: data});
I użyj {{#each apidata}}
w kodzie szablonu
Demo na http://jsfiddle.net/KPCh4/4/
(usunięto resztki if
kodu, który się rozbił )
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 14:30:48
Kierownicy mogą używać tablicy jako kontekstu. Możesz użyć .
jako katalogu głównego danych. Możesz więc przeszukiwać dane tablicy za pomocą {{#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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 14:31:39
Za pomocą this
i {{this}}
. Zobacz kod poniżej w 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));
Wyjście dziennika konsoli:
<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-11 14:32:08