2

我正在使用 Ember.js 生成Twitter Bootstrap Carousel。我正在迭代一个ArrayController，但我遇到了一个问题：轮播需要一个data-slide-to从 0 向上迭代的每个项目（0、1、2 等）。如何使用 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

让您的控制器保持原样。如果您的车把模板中包含名为 items 的数组，那么您可以实现如下所示的轮播。

```车把

<p>There are {{items.length}} slides</p>
<ol class="carousel-indicators">
    {{#each items}}
    <li data-target="#urs" data-slide-to="{{@index}}" class="{{#unless @index}}active{{/unless}}"></li>
    {{/each}}
</ol>

<div class="carousel-inner">
{{#each items}}
    <div class="item {{#unless @index}}active{{/unless}}">
        <img src="{{this.image}}" alt="">
        <div class="container">
            <div class="carousel-caption">
                <h1>{{this.headline}}</h1>
                <p class="lead">{{this.body}}</p>
                <a class="btn btn-large btn-primary" href="#">{{this.button}}</a>
            </div>
        </div>
    </div>
{{/each}}
</div>

<a class="left carousel-control" href="#urs" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#urs" data-slide="next">&rsaquo;</a>

<script>
    $('.slide').carousel({
        interval: 1000
    });
</script>
于 2013-06-03T12:08:46.020 回答
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 回答