2013-08-05 5 views
7

私はスライドを作成していますと、各 - そのような3つの画像一つ一つのdivがありますので、インターネットの周りのコードのインデックスと剰余燃えさしでハンドルバー

<div> 
    <img /> 
    <img /> 
    <img /> 
</div> 

</div> 
    <img /> 
    <img /> 
    <img /> 
</div> 

どれも完璧に動作しない -

https://github.com/johanpoirier/resthub-backbone-stack/commit/8a318477d56c370d2a0af4da6eae9999c7bb29da

http://jaketrent.com/post/every-nth-item-in-handlebars-loop/

http://rockycode.com/blog/handlebars-loop-index/

http://www.arlocarreon.com/blog/javascript/handlebars-js-everyother-helper/

ここに回答がスタックオーバーフローで含まれています。

誰でもこの現在の期間(Ember/Handlebarのバージョン)で完全に動作するコードを提供できますか?

私はindexまたは@indexは、テンプレート内から動作しないことを見出してきたが、あなたは内からアクセスでき

{{#each model}} 
    {{if index % 3 == 0}} 
    {{/if}} 
{{/each}} 
+0

でテスト

{{#each model itemViewClass="Ember.View"}} {{view.contentIndex}} {{/each}} 

あなたは、http見てきました://stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional/9405113#9405113カスタム条件ヘルパーを作成する例がかなりあります。また、* index *は '@ index'で利用できます – colymba

答えて

13

ような何かをしたいと思いますので、私はモデルの配列を持っていますヘルパー。

私はこれを示し、ここで例作った:

http://jsbin.com/egoyay/1/edit

編集:は、答えるためにコードを追加する(非エンバー用){{else}}ブロック

ハンドルバーヘルパーを実証します:

使用法:

<ol> 
{{#each model}} 
    <li> 
    {{#ifIsNthItem nth=3}} 
     Index is a multiple of 3 
    {{else}} 
     Index is NOT a multiple of 3 
    {{/ifIsNthItem}} 
    </li> 
{{/each}} 
</ol> 
+0

あなたのものは完璧に動作します。どうもありがとうございます! – David

+1

ニース。 'options.data.view.contentIndex'は利用できませんでしたが、' options.data.index'を介してインデックスにアクセスすることができました。 – kontur

+0

これはうまくいった。あなたは同じことをどうやって行いますか?他にミックスを追加する能力はありますか? '{{ifIsNthItem nth = 3}}これを行う{{else}}他に何かする{{/ ifIsNthItem}}' – carter

2

あなたはそれが各アイテムのビューを作成し、contentIndexプロパティを設定します、eachヘルパーにitemViewClassを指定した場合:エンバーv1.1.0デベロッパー

+1

itemViewClassを指定しないと、_view.contentIndexを使用できます。しかし、それは#ifヘルパーの中では#内ではうまくいきません。 – Champ

関連する問題