流星0.8.0 - 無法在呈現回調操作DOM

之前0.8.0，下面的代碼完美的作品。流星0.8.0 - 無法在呈現回調操作DOM

<template name="carousel"> 
    <!--Here I used the carousel of Bootstrap--> 
    <div id="myCarousel" class="carousel"> 
     <ol class="carousel-indicators"> 
     {{#each counter}} 
      <li data-target="#myCarousel" data-slide-to="{{this}}"></li> 
     {{/each}} 
     </ol> 
     <div class="carousel-inner"> 
      {{#each carousels}} 
       <div class="item"><a href="{{link}}"><img src="{{src}}" ></a></div> 
      {{/each}} 
     </div> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div> 
</template> 

Template.carousel.helpers({ 
    carousels: function() { 
     return Carousels.find(); 
    }, 
    counter: function() { 
     return _.range(0, Carousels.find().count()); 
    } 
}); 

Template.carousel.rendered = function() { 
    Meteor.defer(function() { 
     $('#myCarousel .carousel-indicators li:first').addClass('active'); 
     $('#myCarousel .item:first').addClass('active'); 
    }); 
}

但更新到0.8.0後，添加'active'類不再工作。使用Meteor.setTimeout代替Meteor.defer，我終於發現，它只能當延遲是足夠長的時間（150毫秒有時更長）。

Template.carousel.rendered = function() { 
    Meteor.setTimeout(function() { 
     $('#myCarousel .carousel-indicators li:first').addClass('active'); 
     $('#myCarousel .item:first').addClass('active'); 
    }, 150); 
}

爲什麼會發生這種情況，有沒有更好的解決方案？

[更新] 現在我用一個簡單的isFirst幫手意識到這一點。我認爲這是一個更好的解決方案。

{{#each carousels}} 
    <div class="item {{isFirst _id}}"><a href="{{link}}"><img src="{{src}}" ></a></div> 
{{/each}} 

Template.carousel.isFirst = function(id) { 
    return Carousels.find().fetch()[0]._id == id ? 'active' : ''; 
}

至於櫃檯，我只是做1「計數器」開頭，而HTML如下：

<ol class="carousel-indicators"> 
    <li class="active" data-target="#myCarousel" data-slide-to="0"></li> 
    {{#each counter}} 
     <li data-target="#myCarousel" data-slide-to="{{this}}"></li> 
    {{/each}} 
</ol>

來源

2014-04-01 Bian Jiaping

聽起來像是一種競爭條件。但是，我不知道，在哪裏，以及在哪裏。 – Homer6

請結帳我的回答對一個非常類似的問題[這裏]（http://stackoverflow.com/questions/22789821/meteor-0-8-blaze-how-to-update-rendered-changes-for-jquery-plugins）。你也可以遵循這種模式。 –

Template.carousel.rendered僅在Blaze（流星的新的渲染運行一次引擎），但它曾經在Spark中運行多次（以前的版本）。這個舊的行爲是有效的，因爲它在你的{{#each}}塊被渲染之前和之後運行。

這裏的問題是，Template.carousel.rendered運行您的{{#each}}塊之前被渲染，所以這些項目還不存在。

的recommended pattern是把內容您的{{#each}}在一個單獨的模板並打入是模板的渲染事件。

順便說一句，Meteor.defer不再需要。

來源

2014-04-01 16:30:04 SuitedSloth

謝謝。它的工作原理，但渲染回調將被稱爲多次。有時可能會導致一些新問題。 –

@Vanitas如果沒有節點已經擁有它，或通過設置的呈現（），只有在運行，如果該變量是假的，然後將其設置爲true的「is_first_run」變量之外，你可以得到解決，迅速加入「主動」當它運行... – SuitedSloth

感謝您的幫助。我只是更新了問題以顯示我的新解決方案，並且不再需要提供回調。再次感謝。 –

流星0.8.0 - 無法在呈現回調操作DOM

回答

相關問題