[英]Jade, Express.js, NodeJS - Automatically rendering the UI with new data
The JSON Object (stories) looks like this: JSON对象(故事)如下所示:
[ {
title: "Story of Learning NodeJS",
id: "1",
description: "Interesting, Fun, Exciting"
}]
The JADE template to render the stories looks like this: 用于呈现故事的JADE模板如下所示:
ul
each story in stories
li
span#storyTitle= story.title
This will render the list of stories in the client side. 这将在客户端呈现故事列表。 Now, I have a Create Story functionality, using which I will add a new story, hence adding it to the JSON object.
现在,我具有“创建故事”功能,该功能将用于添加新故事,从而将其添加到JSON对象。 I want this to be reflected in the Client UI without refreshing the page.
我希望在不刷新页面的情况下将其反映在客户端界面中。
I tried using the: 我尝试使用:
response.render("index", {stories: stories });
after the POST method adds the story to the stories object. 在POST方法将故事添加到故事对象之后。 But the rendering does not happen.
但是渲染不会发生。
How can this be achieved? 如何做到这一点?
You have several possiblities: 您有几种可能性:
There is a good feature you can use, it is called Live HTML Templates . 您可以使用一个很好的功能,称为Live HTML Templates 。 You can easily bind your data and when on the backend they change, it also changes in frontend.
您可以轻松地绑定数据,并且当它们在后端更改时,前端中的数据也会更改。 But you'd need to rewrite your app :(
但是您需要重写您的应用程序:(
Using jQuery: 使用jQuery:
This is a small script that uses $.load
to reload a part of the paga: 这是一个使用
$.load
.load重新加载部分paga的小脚本:
$.reloadSection = function (id) {
var q = window.location.pathname + (window.location.search || "") + " " + id;
$(id).load(q, function () {});
};
Now : 现在:
$.reloadSection('#my-id');
It works! 有用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.