Как я могу обновить данные в представлении руля? - PullRequest
Новая
       43

Как я могу обновить данные в представлении руля?

0 голосов
/ 29 октября 2018

Я работаю над проектом, часть которого отображает уведомления для пользователя. У меня есть объект, который используется для хранения уведомлений, и таблица, в которой отображаются уведомления. Уведомления записываются в файл JSON в правильном формате для последующего использования.

В настоящее время все обстоит так, что объект получает новые уведомления каждые x секунд, но в реальной таблице новые сообщения отображаются только после перезагрузки страницы.

Я ищу:

  • Способ программного обновления данных, хранящихся в таблице, каждые x секунд.


    Или:

  • Метод типа webhooks или сокета, который я могу использовать для отправки нового объекта напрямую клиенту.

  • Метод обновления веб-страницы каждые x секунд без использования такого модуля, как nodemon, который фактически полностью убивает и сбрасывает мой сервер.

Файл JSON 

[
  {
    "Notification": "Limit Exceeded. Event has occurred. Action needed.",
    "Time": "19:54:34",
    "Date": "Sun Oct 28 2018 "
  },
  {
    "Notification": "Limit Exceeded. Event has occurred. Action needed.",
    "Time": "19:54:34",
    "Date": "Sun Oct 28 2018 "
  }
]

Файл JSON начинается пустым, и в него заносятся уведомления. Отсюда извлекаются уведомления и хранятся в пустом объекте уведомлений.

Вид на руль. 

<h2 class="page-header">Notifications</h2>
<h2>{{log}}</h2>
<p>Your Latest Notifications can be Found Below.</p>

{{#if notifications}}
    <table style="width:100%" border="1">
      <tr>
        <th>Notification:</th>
        <th>Time:</th>
        <th>Date:</th>
      </tr>
        {{#each notifications}}
            <tr>
                <td>{{[Notification]}}</td>
                <td>{{Time}}</td>
                <td>{{Date}}</td>


            </tr>
        {{/each}}
    </table>
{{else}}
    <h3>No Current Notifications</h3>
{{/if}}

<form method="post" action="/test/notify" id="removeuserform">
  <button type="submit" class="btn btn-default">Reload page.</button>
</form>

И страница курса отображается с помощью следующей строки. 

    res.render('home', {notifications: notifications});

Решение?

Я изучил здесь много методов и хотел бы также узнать ваше мнение. Я видел, как люди используют веб-хуки, я видел, как люди инициализируют нажатие кнопки, которая перенаправляет на ту же страницу. Я не могу использовать функцию window.reload. Я видел, как люди помещают теги в представления EJS, но я использую Handlebars.

Есть ли способ просто обновить данные в этом объекте уведомлений, когда я помещаю новые объекты в объект? Любые ваши идеи очень ценятся. Заранее спасибо.

1 Ответ

0 голосов
/ 29 октября 2018

Я думаю, вам нужно заботиться о 2 частях:

1, получать данные с сервера в режиме реального времени через сокет. Здесь у вас есть 3 варианта:

  • SocketIO или аналогичный пакет Node.js
  • Служба, такая как Pusher , Firebase ...
  • База данных, поддерживающая синхронизацию данных, например PouchDB , Gun и т. Д.

2, Синхронизация данных из объекта JavaScript для просмотра. Это вызывает привязку данных. По сути, у вас есть объект JS, который содержит ваши уведомления. И вы переводите эти данные в HTML, отображаете их для конечного пользователя. Когда этот объект JS изменяется, ваш HTML должен автоматически обновляться. Это одностороннее связывание, от объекта JS до DOM (модель для просмотра). Многие фреймворки или библиотеки пользовательского интерфейса могут вам помочь. Вы можете выбрать небольшой инструмент, например HyperApp , AppRun , Mithrill и т. Д.

...