javascript - 比较和打印 Bootstrap 面板内的元素

Question

我正在开发一个项目，从 API 中收集学校时间表的数据。这就是我为获取所需的所有必要数据而编写的代码；

var timetable = [];
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 
'Friday', 'Saturday'];



// Go through the data and pick specific information
for (var i = 0; i < json.reservations.length; i++) {
    if (json.reservations[i].resources != null) {
        for (var j = 0; j < json.reservations[i].resources.length; j++) {


            var reservation = json.reservations[i];
            var resource = json.reservations[i].resources[j];

            // Get student group
            if (resource.type === "student_group") {
                if (timetable.indexOf("name")) {
                    var studentGroup = timetable.push(resource.name.bold() + "<br/>");
                }
            }

            // Get scheduling group
            if (resource.type === "scheduling_group") {
                if (timetable.indexOf("name")) {
                    var schedulingGroup = timetable.push(resource.name + "<br/>")
                }
            }


           // Get rooms
           if (resource.type === "room") {
               if (timetable.indexOf("code")) {
                   var room = timetable.push(resource.code.bold() + "<br/>" + "<br/>");
               }                                     
           }
       }                              
   }

   // Get subject
   if (reservation != null) {
       if (timetable.indexOf("subject")) {
           var subject = timetable.push("<br/>" + reservation.subject.bold() + "<br/>");
       }
   }

   // Day name (Mon, Tue, Wed...)
   var day = new Date(reservation.startDate);                          
   var date = timetable.push(days[day.getDay()].bold() + "<br/>");

   // Starting timestamp
   if (reservation != null) { 
       var start = reservation.startDate;
       var startStr = start.split("-").join('/').slice(0, 10) + "<br/>" + start.slice(11, 16);
       lukkari.push(startStr + " - ");
   }

   // Ending timestamp
   if (reservation != null) {
       var end = reservation.endDate;
       var endStr = end.slice(11, 16);
       timetable.push(endStr + "<br/> <br/>");
   }

   var line = timetable.push("_______________________________<br/>");

  // Print
  document.getElementById("demo").innerHTML = timetable.join("");

这是将数据打印到 timetable 数组中的输出；

A440.2   

KL25AB10403-3001

Monday
2017/01/16
10:00 - 13:00

_______________________________


A440.4

KL04DVTT04-3002

Monday
2017/01/16
13:15 - 16:00

_______________________________


A320.2

KC00AKO10-3007

Tuesday
2017/01/17
09:00 - 11:45

_______________________________


A420.4    

KC00AMT1010-3010

Tuesday
2017/01/17
12:15 - 14:00

_______________________________


A420.4

KC00AMT1010-3010

Wednesday
2017/01/18
08:00 - 10:45

_______________________________


A350.3

KL04BTTIVE1-3001

Wednesday
2017/01/18
11:00 - 13:00

_______________________________


A440.4

KL04DVTT04-3002

Wednesday
2017/01/18
13:15 - 15:00

_______________________________


A440.2

KL25AB10403-3001

Thursday
2017/01/19
08:00 - 09:45

_______________________________


A320.2

KC00AKO10-3007

Thursday
2017/01/19
10:00 - 11:45

但我不希望这些信息只存在于数组中。我正在考虑将每天(周一、周二等)的数据打印到各自的列中。

在这里，我正在考虑使用折叠 Bootstrap 面板，每个面板都有自己各自的日期名称，例如。周一、周二...

是否有任何快速有效的解决方案可以将我收集的数据中的日期名称(如您从时间表数组中看到的那样)链接到具有相同日期名称的面板？

...或者您对智能解决方案有任何替代想法吗？

Answer 1

为此，我将使用像 Handlebars.js 这样的模板引擎

最近我完成了一个项目，该项目广泛使用了 Bootstrap 3 的 Handlebars，我发现它非常容易适应该项目

在这个面板中教你 Handlebars 太费力了，但它允许你使用 {{tokens}} 定义一个 HTML 模板，你的数据将存放在其中，并且它具有有用的功能，例如迭代提供的数据集以根据需要构建尽可能多的面板来显示集合中的所有数据

语法最终在标记中看起来像这样:

{{#each event}}
  <div class="panel">
    <h3>{{event.dayOfWeek}}</h3>
    <p>
      <label>{{event.date}}</label>
      <label>{{event.startTime}} - {{event.endTime}}</label>
    </p>
  </div>
{{/each}}

super 容易使用。查一下。很棒的工具。