Meteorフレームワークでカルーセルに画像をレンダリングする方法

Question

Carousalにあるすべての画像をroom.htmlからMeteorJsのImgDashboard.htmlにレンダリングする方法。私はここにすべての画像を必要とするので、私はあなたがあなたのカルーセルを再利用したい、この場合には、あなたのHTMLコードを再利用したい、私が理解できるものから、流星テンプレートにカルーセルになる

 <!-- **ImgDashboard.js** --> 

     Template.ImgDashboard.helpers({ 
     setImageProcessing: function() { 
       var roomId = localStorage.getItem('roomId');/*set localstorage */ 
       var imageData = ImageData.findOne({RoomId: roomId}); 
/* ImageData collection in Mongodb */ 
       setTimeout(function(){ 
       var item = ""; 
       imageData.ImageData.forEach(function(data){ 
       var base64String = data.ImageString; 

      item += '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" >\ 
         <div class="center-block" width="300" height="300" 
       alt="" >\ 
       <img src='+base64String+' class= "img-responsive center- 
       block"/>\ 
       </div>\</div>'; /* concatenation of images */ 

        }, function(err){ 

       }) 
       $('.image-list').append(item); 

       },10) 


       }); 


     <!-- **ImgDashboard.html** --> 

      <template name="ImgDashboard"> /* template rendered here to display */ 
      {{> Header}} 
      <div class="container-fluid"> 
      <div> {{setImageProcessing}}</div> /* method from helper */ 
      <div class="image-list">/* images here from helper */ 

      </div> 
      </div> 
      </template> 


     <!-- **Room.html** --> 


      <div class="container-fluid"> 
      <div class="row"> 

      <div id="carousel-example-generic" class="carousel slide" data- 
     ride="carousel"> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
       <img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597"> /* First block */ 
       </div> 
       <div class="item"> 
       <img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597"> /* second block */ 
       </div> 
       <div class="item"> 
       <img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597"> /* third block */ 
       </div> 
       <div class="item"> 
       <img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597">/* fourth block */ 
       </div> 
       <div class="item"> 
       <img src="images/bedroom-lg.jpeg" class="img-responsive" width="100%" height="597">/* fifth block */ 
       </div> 
      </div> 

      /* -- Controls -- */ 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
      </div> 

      </div> 
     </div> 

Answer 1

流星の枠組みの中で新しいです。 {{>カルーセル}}

注：あなたが何ができるか

はあなたのカルーセルを構成されたテンプレートを作成し、このようなあなたのImgDashboardテンプレート の内側にそのテンプレートを呼んで、私はあなたの中のhtml保管しなければならないと思ういけませんあなたがイメージを格納するために行ったような変数。あなたができることは、データを配列に格納し、{{#each}}ループ

を使用してhtmlテンプレートで反復処理することです