Визуализация вложенного аккордеона Bootsrap из динамических данных JSON - PullRequest
Новая
       32

Визуализация вложенного аккордеона Bootsrap из динамических данных JSON

1 голос
/ 25 марта 2019

Я пытаюсь загрузить динамические объекты json из firebase и заполнить вложенный начальный аккордеон.Сценарий: альбомы и песни для простоты у каждого есть только «заголовок».Имеется в виду основной аккордеон альбомов и для каждого альбома вложенный аккордеон песен.

Я использую библиотеку шаблонов усов с частями.Шаблон для элемента альбома и другой для элемента песни.Пока только альбомы появляются как первый уровень, и мне нужна помощь в достижении вложенной функциональности.Пожалуйста, будьте осторожны со мной, поскольку я обычно не веб-разработчик.Спасибо за внимание! 

    //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++;
    });
}); 
  }
});
...