28

したがって、これは私のデータの一般的な要点です (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を使用できれば、それもうまくいきますが、できればこのセットアップだけでうまくいきます。

4

5 に答える 5

11

現在のデータ形式には、次の 2 つの問題があります。

  1. Handlebars は、オブジェクトではなく、配列を繰り返し処理する必要があります。
  2. JavaScript オブジェクトには信頼できる順序がありません。

次のように、データを再配置して入れ子になった配列にすることができれば、運が良くなります。

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>

オブジェクトを反復処理するヘルパーを作成することもできますが、適切な表示順序を確保したい場合は、配列でキーを指定する必要があります。

于 2012-09-14T03:47:02.187 に答える
1

カスタム コンポーネントを介してこれを行うことができます。例を参照してください。これは、デフォルトの{{each}}ヘルパーではサポートされていません (これは意図的なものです)。

サンプルデータ：

a = {a:'muhammad', b :'asif', c: 'javed', username: 'maxifjaved'}

**

オブジェクトの反復スローのオンラインデモ

http://emberjs.jsbin.com/yuheke/1/edit?html,js,output

**

于 2016-07-14T06:38:37.387 に答える
0

I'm more of a Mustache man :-{)

But from the docs over here it looks like this kind of thing will do it:

<select>
  <option value="">All Shows (default)</option>
  <optgroup label="Fruit">
    {{#each Fruit}}
    <option value="{{id}}">{{name}}</option>
    {{/each}}
  </optgroup>
  <!-- repeat for others-->
</select>
于 2012-09-13T23:50:35.703 に答える
0

ハンドルバーのみのソリューションに関しては、次のロジックを実装しました。

{{#each Listings}} 

<a href="javascript:void(0)" title="" ><img src="    {{DefaultImage}}" alt=" {{Make}} {{Model}}" /> </a>
于 2015-11-21T14:20:58.560 に答える