Kierownica / wąsy - czy istnieje wbudowany sposób pętli przez właściwości obiektu?
Jak mówi tytuł pytania, czy istnieje sposób na zapętlenie przez właściwości obiektu?
Więc z
var o = {
bob : 'For sure',
roger: 'Unknown',
donkey: 'What an ass'
}
Czy Mogę zrobić coś w silniku szablonu , co byłoby równoważne
for(var prop in o)
{
// with say, prop a variable in the template and value the property value
}
?
7 answers
Wbudowane wsparcie od kierownicy 1. 0rc1
Wsparcie dla tej funkcjonalności zostało dodane do kierownicy.js, więc nie ma już potrzeby pomocy zewnętrznej.
Jak go używać
Dla tablic:
{{#each myArray}}
Index: {{@index}} Value = {{this}}
{{/each}}
Dla obiektów:
{{#each myObject}}
Key: {{@key}} Value = {{this}}
{{/each}}
Zauważ, że tylko właściwości przechodzące przez hasOwnProperty
test zostanie wyliczony.
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
2013-07-07 22:02:39
W rzeczywistości jest to dość łatwe do zaimplementowania jako helper:
Handlebars.registerHelper('eachProperty', function(context, options) {
var ret = "";
for(var prop in context)
{
ret = ret + options.fn({property:prop,value:context[prop]});
}
return ret;
});
Następnie używać go w ten sposób:
{{#eachProperty object}}
{{property}}: {{value}}<br/>
{{/eachProperty }}
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
2012-10-25 07:46:22
EDIT: kierownica ma teraz wbudowany sposób osiągnięcia tego celu; Zobacz wybraną odpowiedź powyżej. Podczas pracy z prostymi wąsami nadal obowiązują poniższe zasady.
Wąsy mogą iterować nad elementami w tablicy. Sugerowałbym więc utworzenie osobnego obiektu danych sformatowanego w taki sposób, aby mógł z nim pracować:
var o = {
bob : 'For sure',
roger: 'Unknown',
donkey: 'What an ass'
},
mustacheFormattedData = { 'people' : [] };
for (var prop in o){
if (o.hasOwnProperty(prop)){
mustacheFormattedData['people'].push({
'key' : prop,
'value' : o[prop]
});
}
}
Teraz Twój szablon wąsów będzie coś w stylu:
{{#people}}
{{key}} : {{value}}
{{/people}}
Sprawdź sekcję "niepuste listy" tutaj: https://github.com/janl/mustache.js
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
2017-05-23 12:34:47
To jest odpowiedź @ Ben zaktualizowana do użytku z Ember...uwaga musisz użyć Ember.get
, ponieważ kontekst jest przekazywany jako łańcuch znaków.
Ember.Handlebars.registerHelper('eachProperty', function(context, options) {
var ret = "";
var newContext = Ember.get(this, context);
for(var prop in newContext)
{
if (newContext.hasOwnProperty(prop)) {
ret = ret + options.fn({property:prop,value:newContext[prop]});
}
}
return ret;
});
Szablon:
{{#eachProperty object}}
{{key}}: {{value}}<br/>
{{/eachProperty }}
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
2013-05-30 05:03:32
@Amit odpowiedź jest dobra, bo będzie działać zarówno w wąsach, jak i kierownicy.
Jeśli chodzi o rozwiązania tylko dla kierownicy, widziałem kilka i podoba mi się each_with_key
block helper na https://gist.github.com/1371586 najlepszy.
- pozwala na iterację nad literałami obiektowymi bez konieczności ich restrukturyzacji i
- daje Ci kontrolę nad tym, co nazywasz zmienną kluczową. Przy wielu innych rozwiązaniach należy uważać na używanie kluczy obiektowych o nazwie
'key'
, lub'property'
, itp.
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
2012-08-02 22:39:40
Dzięki za rozwiązanie Bena, mój przypadek użycia do wyświetlania tylko konkretnych pól w kolejności
Z obiektem
Kod:
handlebars.registerHelper('eachToDisplayProperty', function(context, toDisplays, options) {
var ret = "";
var toDisplayKeyList = toDisplays.split(",");
for(var i = 0; i < toDisplayKeyList.length; i++) {
toDisplayKey = toDisplayKeyList[i];
if(context[toDisplayKey]) {
ret = ret + options.fn({
property : toDisplayKey,
value : context[toDisplayKey]
});
}
}
return ret;
});
Obiekt źródłowy:
{ locationDesc:"abc", name:"ghi", description:"def", four:"you wont see this"}
Szablon:
{{#eachToDisplayProperty this "locationDesc,description,name"}}
<div>
{{property}} --- {{value}}
</div>
{{/eachToDisplayProperty}}
Wyjście:
locationDesc --- abc
description --- def
name --- ghi
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
2013-04-10 14:47:49
Jest to funkcja pomocnicza dla mustacheJS, bez wstępnego formatowania danych i uzyskiwania ich podczas renderowania.
var data = {
valueFromMap: function() {
return function(text, render) {
// "this" will be an object with map key property
// text will be color that we have between the mustache-tags
// in the template
// render is the function that mustache gives us
// still need to loop since we have no idea what the key is
// but there will only be one
for ( var key in this) {
if (this.hasOwnProperty(key)) {
return render(this[key][text]);
}
}
};
},
list: {
blueHorse: {
color: 'blue'
},
redHorse: {
color: 'red'
}
}
};
Szablon:
{{#list}}
{{#.}}<span>color: {{#valueFromMap}}color{{/valueFromMap}}</span> <br/>{{/.}}
{{/list}}
Wyjścia:
color: blue
color: red
(kolejność może być losowa - to mapa) Może to być przydatne, jeśli znasz element mapy, który chcesz. Uważaj na fałszywe wartości.
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
2014-07-09 08:54:34