Emer.js入門ガイド-handlebars遍歴ラベル

このシリーズの記事はすべて(http://ibeginner.sinaapp.com/)を移転して、元のサイトへようこそ.
前の文章と同じ方法で ember generate route handlebars-each コマンドは、ルーティングファイルと対応するテンプレートファイルを作成します.
       この記事では、ループラベルを紹介します.配列のループは、ほとんどの一般的な開発言語で見られ、非常に広範な機能を使用しています.以下では、EL式とほぼ同じ使い方をしているhandlebarsの遍歴ラベルを紹介します.一度見てみればきっとわかると思いますが...くだらないことは言わないで、次は直接プレゼンテーションコードに行きましょう!!

//  app/routes/handlebars.js
 
 
import Ember from 'ember';
 
/**
 *              
 */
export default Ember.Route.extend({
       //    model    ，       
    model: function() {
              return [
                     Ember.Object.create({ name: 'chen', age: 25}),
                     Ember.Object.create({ name: 'i2cao.xyz', age: 0.2}),
                     Ember.Object.create({ name: 'ibeginner.sinaapp.com', age: 1}),
                     Ember.Object.create({ name: 'ubuntuvim.xyz', age: 3})
              ];
       }
});

上記のようにrouteにはテスト用のオブジェクト配列が構築され,各オブジェクトに2つの属性(name,age)がある.
次に、データを表示するtemplateを示します.

<!-- // app/templates/handlebars.hbs -->
 
{{!    route         }}
<ul>
       {{#each model as |item|}}
              <li>Hello everyone, My name is {{item.name}} and {{item.age}} year old.</li>
       {{/each}}
</ul>

似たような感じはありませんか!!EL式のforEachラベルとほぼ同じです.意外なことに、次のような結果が見られるはずです.
注意:この時点で実行されているURLは、新しく作成したばかりのrouteであることを覚えておいてください.
配列を操作するときは、公式に推奨されている方法(pushではなくpushObjectを追加するなど)を使用することに注意してください.前の記事を参照してください.
1、アクセス配列の下付き
配列の下付き文字を取得する必要がある場合があります.たとえば、データのシーケンス番号として下付き文字を取得する場合があります.次のプレゼンテーションを参照してください.

<!-- // app/templates/handlebars.hbs -->
 
{{!    route         }}
<ul
       {{#each model as |item index|}}
              <li>{{index}} Hello everyone, My name is {{item.name}} and {{item.age}} year old.</li>
       {{/each}}
</ul>

しかし、この下のマークは0から始まり、jstlのforEachラベルはこのように{{index+1}}書くことができるとは考えられません.handlebarsはこのように書くことはできません.似たような解決策があるかどうかはまだ分かりませんが...
2,空配列処理
eachタグ内では{{else}}も使用でき、配列が空の場合にelseコードブロックが実行されます.

{{!      ，   route   model  ，    else       }}
{{#each model as |item|}}
       Hello, {{item.name}}
{{else}}
       Sorry, nobody is here.
{{/each}}

効果をテストするには、app/routes/handlebars.jsのreturn文を「return[]」に変更します.このときテンプレートに戻ったのは空の配列で、結果も予想通りで、ページには「Sorry,nobody is here.」が表示されます.
 
       上記の内容はhandlebarsのeach遍歴使用例である.難しくないはずなのに・・・