4

私はアイアンルーターを使用しています。アイテムのリストを持つルート「モデル」があります。ユーザーがこれらの項目の 1 つをクリックすると、新しいルート「モデル」が使用され、選択された項目の名前がパラメーターとして渡され、そのモデルに関するデータをデータベースからロードするために使用されます。

データベースから返された画像の配列を使用して（パラメーターに基づいて）、滑らかなカルーセルを使用したい。

<div id="carousel">
    {{#each images}}
    <div class="item">
        <img src="/images/{{this}}" alt="">
    </div>
    {{/each}}
</div>

slick init はどこで呼び出す必要がありますか?

4

2 に答える 2

9

一般的に言えば、テンプレートのonRenderedコールバックでプラグインを初期化する必要があります。あなたの場合、onRendered画像がDOMに挿入される前に起動するため、それは機能しません。私が見た他のカルーセル プラグインでは、次の戦略が機能します。

  1. 各アイテムを独自のテンプレートに移動します ( carouselItem)。
  2. 各項目が DOM に追加された後にプラグインが初期化されるように、onRenderedコールバックを追加します。carouselItem

滑らかなカルーセルでこれを試したことはありませんが、次のようになります。

<template name="carousel">
  <div id="carousel">
    {{#each images}}
      {{> carouselItem}}
    {{/each}}
  </div>
</template>

<template name="carouselItem">
  <div class="item">
    <img src="/images/{{this}}">
  </div>
</template>

Template.carouselItem.onRendered(function() {
  $('#carousel').slick();
});

スリックカルーセルを複数回初期化できると仮定すると、このアプローチは機能するはずです。考えられる欠点の 1 つは、プラグインが更新されるたびimagesに更新されることです。これを修正する 1 つの方法は、 find{reactive: false}でオプションを使用することです。

于 2015-05-09T17:40:25.017 に答える
1

通常、要素のプラグインを次のように呼び出しますTemplate.myTemplate.onRendered。

Template.xxx.onRendered(function() {
  $('#carousel').slick();
});`
于 2015-05-09T14:47:32.093 に答える