これが私のデータの一般的な要点です(chrome webkitインスペクターからの外観をコピー)。
> Object
> Fruit: Array[2]
> 0: Object
name: "banana"
color: "yellow"
animalthateats: "monkey"
id: 39480
> 1: Object
length: 2
> Vegetables: Array[179]
> Dairy: Array[2]
> Meat: Array[3]
> __proto__: Object
そして、これは私がしたいことです(一般的に):
<select>
<option value="">All Shows (default)</option>
<optgroup label="Fruit">
<option value="39480">Banana</option>
<option value="43432">Strawberry</option>
</optgroup>
<optgroup label="Vegetables">
<option value="3432">Broccoli</option>
</optgroup>
</select>
私はテンプレート作成全体にまったく新しい人であり、達成するのは間違いなく簡単ではないようです...とにかく動作するjQueryを使用できれば、できればこのセットアップでだけです。
現在のデータ形式には、次の2つの問題があります。
データをネストされた配列に再配置できる場合は、次のような幸運があります。
var foods = { /* what you already have */ };
var for_hb = [
{ name: 'Fruit', foods: foods.Fruit },
{ name: 'Vegetables', foods: foods.Vegetables },
//...
];
次のような簡単な方法でそれを行うことができます。
var for_hb = [ ];
for(var k in foods)
for_hb.Push({name: k, foods: foods[k]});
for_hb.sort(function(a, b) {
a = a.name.toLowerCase();
b = b.name.toLowerCase();
return a < b ? -1
: a > b ? +1
: 0;
});
var html = compiled_template({ groups: for_hb });
次に、テンプレートは単純です:
<select>
<option value="">All Shows (default)</option>
{{#each group}}
<optgroup label="{{name}}">
{{#each foods}}
<option value="{{id}}">{{name}}</option>
{{/each}}
{{/each}}
</select>
オブジェクトを反復処理するヘルパーを作成することもできますが、適切な表示順序を確認したい場合は、配列内のキーを指定する必要があります。
「これ」だけを使用してください
`<script id="some-template" type="text/x-handlebars-template">
<option value="none">Selec</option>
{{#each data}}
<optgroup label="{{@key}}">
{{#each this}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</optgroup>
{{/each}}
</script>`
これは、カスタムコンポーネントを介して行うことができます。例を参照してください。これは、デフォルトの{{each}}
ヘルパー(およびそれは意図的です)。
サンプルデータ:
a = {a:'muhammad', b :'asif', c: 'javed', username: 'maxifjaved'}
**
オブジェクトを繰り返しスローするためのオンラインデモ
**
私はもっと口ひげの男だ:-{)
しかし、ここのドキュメントからは、次のようなことができるように見えます:
<select>
<option value="">All Shows (default)</option>
<optgroup label="Fruit">
{{#each Fruit}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</optgroup>
<!-- repeat for others-->
</select>
Handlebarsのみのソリューションに関しては、このロジックを実装しました。
{{#each Listings}}
<a href="javascript:void(0)" title="" ><img src=" {{DefaultImage}}" alt=" {{Make}} {{Model}}" /> </a>