jQuery добавить новые данные

Question

Я выполняю несколько упражнений с использованием Node.js, Express.js и MongoDB.

На данный момент у меня возникла проблема с нажатием нового содержимого, созданного с помощью jQuery.Ajax.

У меня есть список сообщений в домашней странице с Джейд: (сейчас я напишу что-то простое, но у меня это с гораздо более HTML элементов ...)

ul 
    each post in posts 
    li 
     h1 title 
     p post 

С нормальной форме и обратной передачи это ok, потому что страница обновлена.

Bue с помощью jQuery и Ajax на успех Я должен добавить новое сообщение без обновления страницы ... Есть решение с Jade, чтобы сделать это, не написав весь html в jQuery?

Можете ли вы предложить лучший способ сделать это?

Answer 1

Jade скомпилирован как HTML, поэтому нет, в jQuery нет шаблонов jade. Однако вы можете записывать фрагменты в jade, компилировать их и сохранять их на свой веб-сервер (например, post_template.html), затем загружать файл с помощью jquery, создавать элемент jQuery из загруженного текста, а затем изменять свойства и содержимое элементов в новом элементе. Затем вы добавите элемент на страницу.

Этот подход позволит вам избежать написания html в вашем jQuery.

//Wrap this in the code that gets updates 
$.get("templates/post.html", function(data) { 
    var el = $(data); 

    //If you want to change specific properties 
    var title = el.children('h1'); 
    title.text('My new text'); 

    el.appendTo('ul#postList'); 
}); 

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