jQuery追加新数据

Question

我正在使用Node.js，Express.js和MongoDB进行一些练习。

目前，我在尝试推送使用jQuery.Ajax创建的新内容时遇到问题 。

我在首页上有关于Jade的帖子列表：（现在我会写一些简单的东西，但是我的HTML元素更多...）

ul
  each post in posts
    li
      h1 title
      p post

使用常规格式并回发是可以的，因为页面已刷新。

如果成功使用jQuery和Ajax，我应该在不刷新页面的情况下追加新帖子... Jade有解决方案，而无需在jQuery中编写整个html？

您能建议一种更好的方法吗？

Answer 1

Jade被编译为HTML，所以没有，无法在jQuery中使用Jade模板。 但是，您可以做的是用玉编写代码片段，进行编译，然后将其保存到您的Web服务器（例如post_template.html），然后使用jquery加载文件，从所加载的文本创建jQuery元素，然后更改属性和新元素中元素的内容。 然后，将元素附加到页面。

这种方法将使您避免在jQuery中编写html。

//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');
});

例如，如果要在单击时执行此操作，只需将该函数包装在单击处理程序中，即可用于页面上要用于触发新项目的某些元素。