1

我正在尝试从 firebase 加载动态 json 对象并填充嵌套的引导手风琴。场景：为简单起见，专辑和歌曲都只有“标题”。意思是专辑的主要手风琴和每张专辑嵌套的手风琴歌曲。

我正在使用带有部分的 mustache 模板库。专辑项目的模板和歌曲项目的另一个模板。到目前为止，只有专辑显示为第一级，我需要帮助来实现嵌套功能。请对我温柔一点，因为我通常不是网络开发人员。感谢您的关注！

    //here i have both template files the header and subitem these are nested 
    bootstrap accordion
     <script id="heading" type="text/x-custom-template">
        <div class="panel panel-default">

    <!--               panel heading-->
                <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#{{id}}" id="{{id}}">
                    {{title}}
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="{{id}}" class="panel-collapse collapse">
                  <div class="panel-body" id="body">
                  {{# songs }}
                 {{> song}}
                  {{/ songs }}
                    <!-- nested items -->
           `enter code here`<!-- nested -->                   
                 </div><!--/.panel-body -->
                   </div><!--/.panel-collapse -->
                </div><!-- /.panel -->
    </script>

 <script id="subItem" type="text/x-custom-template" >
      <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#{{id}}">
                    {{title}}
                     </a>
            `enter code here`      </h4>
               </div><!--/.panel-heading -->
               <div id="{{id}}" class="panel-collapse collapse">
                  <div class="panel-body">
                   bla bla bla
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
    </script>



//here is the function to load the data: the idea: for each album item render accordions as the number of songs

 function loadData()

    {
      var ref = firebase.app().database().ref();
   var i=0;
    ref.child("music").child($('#language_selector option:selected').text()).on("value", function(snapshot) {

    console.log(snapshot.val());
   //for each album 
   snapshot.forEach(function(data) {

        var album=data.val();
        var songs =album.songs;
        var array=[];
       Object.keys(songs).forEach(function(key) {
        value = songs[key];
          array.push(value);
     });
      //get the songs
        var data={songs:array,title:album.title,id:i};
       // var data={title:album.title,id:i};

          var header = $('#heading').html();
          var userTemplate=$('#subItem').html();
         Mustache.parse(header);
         var ht = Mustache.render(header, data,  {
         song: userTemplate
    });
        $('#accordion').append(ht); 
     i++;
    });
}); 
  }
});
4

0 回答 0