Javascript 如何在Meteor框架中将图像渲染成旋转木马

如何将Carousal中的所有图像从room.html渲染到MeteorJs中的ImgDashboard.html。我是新的流星框架，所以我需要在这里所有的图像进入流星模板carousal

        <!--  **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>

Template.ImgDashboard.helpers({
setImageProcessing:函数（）{
var roomId=localStorage.getItem（'roomId'）；/*设置localStorage*/
var imageData=imageData.findOne（{RoomId:RoomId}）；
/*Mongodb中的图像数据采集*/
setTimeout（函数（）{
var项目=”；
imageData.imageData.forEach（函数（数据）{
var base64String=data.ImageString；
项目+='\
\
\
\“；/*图像的串联*/
}，函数（err）{
}) 
$（'.image list'）。追加（项）；
},10)   
});
/*在此处渲染以显示的模板*/
{{>头}
{{setImageProcessing}}/*方法，来自helper*/
/*这里的图像来自helper*/
/*第一座*/
/*第二块*/
/*第三座*/
/*第四座*/
/*第五座*/
/*--控制--*/

据我所知，您希望重用html代码，在这种情况下，您希望重用Carousal

您可以做的是制作一个包含您的carousal的模板，并在

ImgDashboard

模板中调用该模板 这样地： {{>carousal}

注意：我认为您不应该像存储图像那样将html存储在变量中。您可以做的是将数据存储在数组中，并使用

{{each}}

循环在html模板中迭代