Как переключаться между индексами по извлеченным данным в ejs? - PullRequest
Новая
       16

Как переключаться между индексами по извлеченным данным в ejs?

1 голос
/ 08 мая 2019

Я отправил массив объектов во внешний интерфейс и хотел бы переключать отображаемые данные между индексами 0 и 1 (uniTimes [0] <-> uniTimes [1]), каждые 5 минут или около того. Как я могу это сделать, возможно ли это только с помощью внешних сред, таких как React / Angular? 

**//Array**

  var uniTimes = [
    {
      lectures: [
        {
          title: "Information System Security",
          classroom: "503a.",
          start: "1995-12-17T08:00:00",
          end: "1995-12-17T09:15:00"
        },
        {
          title: "Project Management",
          classroom: "117a.",
          start: "1995-12-17T08:30:00",
          end: "1995-12-17T09:30:00"
        },
        {
          title: "Audiovisual Art",
          classroom: "228a.",
          start: "1995-12-17T09:45:00",
          end: "1995-12-17T12:00:00"
        } 
      ]
    },
    {
      labs: [
        {
          title: "Graphic Design",
          classroom: "505a.",
          start: "1995-12-17T09:15:00",
          end: "1995-12-17T10:15:00"
        },
        {
          title: "Special Effects",
          classroom: "228a.",
          start: "1995-12-17T11:30:00",
          end: "1995-12-17T12:00:00"
        },
        {
          title: "Robotics",
          classroom: "513a.",
          start: "1995-12-17T08:45:00",
          end: "1995-12-17T09:30:00"
        }
      ]
    }
  ]

**//Render code**

res.render('index', { uniTimes: uniTimes});

**//EJS Code**

    <% for(var i = 0; i < uniTimes[0].lectures.length; i++) { %>
      <div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
        <h3><%= uniTimes[0].lectures[i].title %></h3>
        <h3><%= uniTimes[0].lectures[i].classroom %></h3>
        <h3><%= uniTimes[0].lectures[i].start %></h3>
        <h3><%= uniTimes[0].lectures[i].end %></h3>
      </div>
    <% } %>

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Если вы хотите просто переключить видимость между labs и lectures, вы можете сделать это с помощью vanilla javascript. Угловой или реактивный не требуется. Используйте setInterval ()
Создайте 2 div для каждой записи и переключите их видимость. 

<div id="lectures">
<% for(var i = 0; i < uniTimes[0].lectures.length; i++) { %>
    <div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
        <h3><%= uniTimes[0].lectures[i].title %></h3>
        <h3><%= uniTimes[0].lectures[i].classroom %></h3>
        <h3><%= uniTimes[0].lectures[i].start %></h3>
        <h3><%= uniTimes[0].lectures[i].end %></h3>
    </div>
<% } %>
</div>

<div id="labs" style="display:none">
<% for(var i = 0; i < uniTimes[0].labs.length; i++) { %>
    <div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
        <h3><%= uniTimes[0].labs[i].title %></h3>
        <h3><%= uniTimes[0].labs[i].classroom %></h3>
        <h3><%= uniTimes[0].labs[i].start %></h3>
        <h3><%= uniTimes[0].labs[i].end %></h3>
    </div>
<% } %>
</div>


<script type="text/javascript">
    var lectures = document.getElementById("lectures");
    var labs = document.getElementById("labs");
    setInterval(function() {
        if (lectures.style.display === 'none') {
          lectures.style.display = 'block';
          labs.style.display = 'none';
        } else {
            lectures.style.display = 'none';
            labs.style.display = 'block';
        }

    }, 5 * 60000);
</script>

Вот пример, который переключает данные каждые 2 секунды. 

var lectures = document.getElementById("lectures");
var labs = document.getElementById("labs");
setInterval(function() {
    if (lectures.style.display === 'none') {
      lectures.style.display = 'block';
      labs.style.display = 'none';
    } else {
    	lectures.style.display = 'none';
    	labs.style.display = 'block';
    }
    
}, 2000);
<div id="lectures">
  <h2>
    lectures
  </h2>
</div>
<div id="labs" style="display:none">
  <h2>
    labs
  </h2>
</div>
0 голосов
/ 08 мая 2019

После рендеринга вы теряете возможность изменять данные, отправляемые пользователю, на стороне сервера, поэтому вам нужно либо использовать что-то, поддерживающее соединение с пользователем, используя socket.io , либо что-то подобное, или отправить все необходимые данные и изменить их, используя код на стороне клиента

...