3

Bootstrap Carousel で最初の画像を「アクティブなアイテム」として設定しようとしています。では、表示されるコレクションの最初の要素を残りの要素とは異なるものにする方法はありますか?

      {{#each pictures}}
        {{#if @first}}
              <div class="item active">
                 <img src="/pictures/{{fileName}}" alt="" />
            </div>
       {{else}}
          <div class="item">
             <img src="/pictures/{{fileName}}" alt="" />
          </div>
       {{/if}}
     {{/each}}

レンダリングされたページには、{{else}} ステートメントのコンテンツのみが表示されます。{{if @first}} を使用してみましたが、うまくいきません。

4

2 に答える 2

8

これは、テンプレートにインデックスが必要な問題とよく似ています。マッピングしてpictures、別の方法で処理する必要があるものをマークする必要があります。例えば：

Template.myPictures.helpers({
  pictures: function() {
    return Pictures.find().map(function(picture, index) {
      if (index === 0)
        picture.isFirst = true;

      return picture;
    });
  }
});

isFirstその後、次のようにテンプレートで使用できます。

{{#each pictures}}
  {{#if isFirst}}
    <div class="item active">
      <img src="/pictures/{{fileName}}" alt="" />
    </div>
  {{else}}
    <div class="item">
      <img src="/pictures/{{fileName}}" alt="" />
    </div>
  {{/if}}
{{/each}}

CoffeeScript@はテンプレートでは機能しないことに注意してください。テンプレート コンテキストの詳細については、こちらを参照してください。

于 2014-08-13T17:46:33.920 に答える
2

それはまさにあなたが求めていたものではありませんが、コールバックactiveで jQuery を使用して最初の項目を作成できます。rendered

Template.myPictures.rendered = function () {
  this.$('.item').first().addClass('active');
};
于 2014-08-13T18:49:00.167 に答える