流星與鐵路由器不能得到光滑的旋轉木馬工作

Question

我正在使用鐵路由器，我有一個路線「模型」，其中有一個項目列表。當用戶點擊其中一個項目時，將使用新的路徑「模型」，所選項目的名稱將作爲參數傳遞並用於從數據庫加載關於該模型的數據。

我想使用圓滑的旋轉木馬，使用從數據庫返回的圖像數組（基於參數）。

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

我應該在哪裏調用光滑的init？

Answer 1

一般來說，你應該在模板的onRendered回調初始化插件。在你的情況下，這將不會工作，因爲onRendered將在任何圖像插入到DOM之前觸發。與其他旋轉木馬插件我見過，以下策略的工作原理：

1. 移動每個項目自身的模板（carouselItem）。
2. 添加一個onRendered回調到carouselItem，這樣插件將在每個項目添加到DOM後被初始化。

我沒有用油滑旋轉木馬嘗試這樣做，但它會是這個樣子：

<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(); 
}); 

假設光滑轉盤可以初始化多次，這種方法應該工作。請注意，一個可能的缺點是隻要更新images，插件就會刷新。一種解決方法是在find中使用{reactive: false}選項。

Answer 2

通常你會叫一個元件上的插件在Template.myTemplate.onRendered：

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