javascript - 如何在 Ember.js 模板中为 Twitter Bootstrap Carousel 创建迭代器

Question

我正在使用 Ember.js 生成 Twitter Bootstrap Carousel .我正在迭代一个 ArrayController，但我遇到了一个问题:Carousel 需要一个 data-slide-to 用于从 0 向上迭代的每个项目 (0, 1、2 等)。我如何使用 Ember 轻松创建它？

另一个后续问题:如何使用 Ember 将迭代的第一项的类设置为 active？

(我的controller是默认格式，所以生成)

相关模板:

<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>

Answer 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}}