流星，並獲得旋轉木馬動態渲染#each

像光滑。努力讓它工作於Meteor的動態數據集。我現在遇到的問題是，當打開一個項目的先前實例時，我會留下前面選擇的w/ghost空白幻燈片。如果我打開一個包含15張圖像的項目，請關閉它並選擇另一個w/1 - 我有14張空白幻燈片。另外，如果我點擊了第15張幻燈片，比如第7張幻燈片，當我打開新項目時，我仍然指向第7張幻燈片，它是空白的，需要點擊6張幻燈片才能看到一個圖像。流星，並獲得旋轉木馬動態渲染#each

在我看來，我需要以某種方式重置浮油控制？我只是不知道該怎麼做。

按照說明在這裏：Image slider doesn't show my images properly before they're cached啓動並運行。

父模板

<div class="col-md-7"> 
    <div class="gallery"> 
    {{#each galleryImages}} 
     {{> slickItem}} 
    {{/each}} 
    </div> 
</div>

光滑模板

<template name="slickItem"> 
    <img class="slick-image" src="{{href}}"> 
</template>

我周圍玩瓦特/光滑一些不同的選擇呈現。

Template.slickItem.onRendered(function() { 
    setTimeout(function() { 
     $('.gallery').slick({ 
      arrows: true, 
      dots: false, 
      autoplay: false, 
      infinite: true, 
      mobileFirst: true, 
      adaptiveHeight: true 
     }) 
    }, 100); 
});

來源

2015-11-20 Marcus Tewksbury

約放棄油滑。從流星的角度來看，我無法相信周圍沒有更多的文檔。我的意思是 - 誰在使用傳送帶而不是用#each餵食它？ –

這裏是子模板w/onRendered方法 - 我發現這是不穩定和越野車：http://stackoverflow.com/questions/30140232/meteor-with-iron-router-cant-get-slick-carousel-工作 –

和似乎應該是正確的答案，或朝着它：http://stackoverflow.com/questions/25354070/meteor-call-function-after-template-is-rendered-with-data –

與朋友帕特里克劉易斯合作，我們制定了以下計劃 - 現在在React vs. Blaze完成。

傳送帶= React.createClass（{

getInitialState: function() { 
    return { 
      carousel : null 
    } 
}, 

componentDidMount() { 

    console.log("componentDidMount"); 

    this.setState({ 
     // carousel: $('#maveletCarousel') 
     carousel: $(this.props.id) 
    }, function() { 
     console.log("carousel: componentDidMount", this.state); 
     this.state.carousel.carousel(); 
    }); 
}, 

initCarousel: function() { 

    // $('#maveletCarousel').carousel(); 

    // Initialize the carousel 
    if(this.state.carousel) { 
     this.state.carousel.carousel({ 
      interval : 2000 
     }); 
    } 

}, 

render() { 

    var hrefId = "#" + this.props.id; 

    // <li data-target={hrefId} key={ index } data-slide-to={ index } className={ indicatorClass }></li> 

    return (

     <div id={this.props.id} className="carousel slide"> 

      <ol className="carousel-indicators"> 
       { 
        this.props.slides.map((slide, index) => { 
         return (
          <li data-target={hrefId} key={ index } data-slide-to={ index }></li> 
        ); 
        }) 
       } 
      </ol> 

      <div className="carousel-inner" role="listbox"> 
       { 
        this.props.slides.map((slide, index) => { 
         return (
          slide && <Slide slide={ slide } key={ index } index={ index } initCarousel={ this.initCarousel }/> 
        ); 
        }) 
       } 
      </div> 

      <a className="left carousel-control" href={ hrefId } role="button" data-slide="prev"> 
       <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span className="sr-only">Previous</span> 
      </a> 
      <a className="right carousel-control" href={ hrefId } role="button" data-slide="next"> 
       <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span className="sr-only">Next</span> 
      </a> 

     </div> 

    ); 
}

}）;

幻燈片= React.createClass（{

componentDidMount() { 
    this.props.initCarousel(); 
}, 

render() { 

    var isActive = 'item' 
    if(this.props.index === 0) { 
     isActive = 'item active' 
    } 

    return (

     <div className={ isActive }> 
      <img src={this.props.slide.href}></img> 
     </div> 

    ) 
}

}）

來源

2016-04-20 12:24:56

流星，並獲得旋轉木馬動態渲染#each

回答

相關問題