Нефрит, Express.js , NodeJS - Автоматический рендеринг пользовательского интерфейса с новыми данными

#javascript #json #node.js #express #pug

#javascript #json #node.js #экспресс #pug

Вопрос:

Объект JSON (stories) выглядит следующим образом:

     [ {
            title: "Story of Learning NodeJS",
            id: "1",
            description: "Interesting, Fun, Exciting" 
    }]

Шаблон JADE для отображения историй выглядит следующим образом:

  ul
    each story in stories
        li
            span#storyTitle= story.title

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

Я попытался использовать:

 response.render("index", {stories: stories });

после того, как метод POST добавит историю в объект stories. Но рендеринг не происходит.

Как этого можно достичь?

Ответ №1:

У вас есть несколько возможностей:

Использование Meteor:

Есть хорошая функция, которую вы можете использовать, она называется Живые HTML-шаблоны. Вы можете легко привязать свои данные, и когда они меняются на серверной части, они также меняются во внешнем интерфейсе. Но вам нужно будет переписать свое приложение:(

Использование jQuery:
Это небольшой скрипт, который использует $.load для перезагрузки части paga:

 $.reloadSection = function (id) {
  var q = window.location.pathname   (window.location.search || "")   " "   id;
  $(id).load(q, function () {});
};

Теперь :

 $.reloadSection('#my-id');

Это работает!