jQuery ajoute de nouvelles données - javascript, node.js, express, pug

Je fais peu d'exercice en utilisant Node.js, Express.js et MongoDB.

Pour le moment, j'ai "un problème à essayer de pousser de nouveaux contenus créés avec jQuery.Ajax.

J'ai une liste de messages en page d'accueil avec Jade: (maintenant je vais écrire quelque chose de simple, mais le mien est avec beaucoup plus d'éléments html ...)

ul
each post in posts
li
h1 title
p post

Avec un formulaire normal et une publication, c'est correct car la page est actualisée.

En utilisant jQuery et Ajax en cas de succès, je devrais ajouter le nouveau message sans rafraîchir la page ... Il existe une solution avec Jade pour le faire sans écrire l'intégralité du code html dans jQuery?

Pouvez-vous suggérer une meilleure façon de procéder?

Réponses:

Jade est compilé en HTML, donc non, il n'y a aucun moyenpour utiliser des modèles de jade dans votre jQuery. Cependant, vous pouvez écrire des extraits de code en jade, les compiler et les enregistrer sur votre serveur Web (tel que post_template.html), puis charger le fichier avec jquery, créer un élément jQuery à partir du texte chargé, puis modifier les propriétés et contenu des éléments dans le nouvel élément. Ensuite, vous ajoutez l'élément à la page.

Cette approche vous permettrait d'éviter d'écrire du html dans votre 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");
});

Si vous vouliez le faire au clic, par exemple, enveloppez simplement cette fonction dans un gestionnaire de clic pour un élément de la page que vous souhaitez utiliser pour déclencher un nouvel élément.