2

Ember.js を使用してTwitter Bootstrap Carouselを生成しています。を反復処理してArrayControllerいますが、問題が発生しました。カルーセルには、data-slide-to0 から上に向かって (0、1、2 など) 反復処理される for each アイテムが必要です。これを Ember で簡単に作成するにはどうすればよいですか?

別のフォローアップの質問: 反復の最初の項目のみのクラスactiveを Ember に設定するにはどうすればよいですか?

（私のコントローラーはデフォルトの形式なので、生成されます）

関連するテンプレート:

<script type="text/x-handlebars" id="featured">
    <div class="span8">
      <div id="featured" class="carousel slide">
        <ol class="carousel-indicators">
          {{#each article in controller}}
            <li data-target="#featured" data-slide-to="0" class="active"></li>
          {{/each}}
        </ol>
        <div class="carousel-inner">
          {{#each controller}}
            <div class="active item">
              <div class="cover-photo">
              {{renderPhoto coverPhoto.url}}
              </div>
              <div class="carousel-caption">
                <h4>{{title}}</h4>
                <p>derp derp durr hurr durr</p>
              </div>
            </div>
          {{/each}}
        </div>
      </div>
    </div>
  </script>
4

3 に答える 3

1

ArticlesController (作成) で、contentWithIndexの各記事のインデックスcontentとisFirstプロパティを含むものを定義します。

App.ArticlesController = Ember.ArrayController.extend({
  contentWithIndex: function() {
    var content = this.get('content') || [];

    return content.map(function(article, index) {
      return {
         article: article, 
         index: index,
         isFirst: (index === 0)
      } 
    });
  }.property('content.[]')
});

次に、テンプレートで：

{{#each controller.contentWithIndex}}
   <div {{bindAttr class=":item isFirst:active"}} 
        {{bindAttr data-slide-to="index"}}>
      <div class="cover-photo">
         {{renderPhoto article.coverPhoto.url}}
      </div>
      <div class="carousel-caption">
         <h4>{{article.title}}</h4>
         <p>derp derp durr hurr durr</p>
      </div>
   </div>
{{/each}}
于 2013-04-08T07:41:36.947 に答える
0

あなたのフォローアップに関して、すべてのスライドにカスタムビュークラスを設定し、didInsertElement の最初のものであるかどうかを確認することで、最初のスライドのみがアクティブなクラスを持つようにしました。

    App.CarouselView = Ember.View.extend
        layout: require '../../../templates/components/carousel'
        classNames: ['carousel', 'slide']
        didInsertElement: ->
            element = $(@$()).carousel interval: false
            element.on 'slid', =>
                @set 'currentSlide', element.data('carousel').getActiveIndex() + 1
        currentSlide: 1
        controlHref: (->
                '#' + @get('elementId')
            ).property 'elementId'    

        slidesView: Ember.CollectionView.extend
            contentBinding: 'parentView.slides'
            classNames: ['carousel-inner']    

            itemViewClass: Ember.View.extend
                classNames: ['item']
                slidesBinding: 'parentView.content'
                didInsertElement: ->
                    # Bootstrap carousels require that the first slide has the 'active' class.
                    if @get('slides.firstObject') is @get('context')
                        @$().addClass 'active'
于 2013-06-12T07:27:32.847 に答える