问题
I have a server-side templating engine, Jade, which I use to render a layout. When the client receives the layout for the first time, there will only be small subsequent changes in the contents of the layout that may need updating, not the layout itself.
Is there a way to "rerender" client-side by only changing what needs to be updating, and at the same time using the power of Jade.
回答1:
You can do it via socket.io, I am currently developing the program in node.js to do it and have a working prototype - https://github.com/parj/tableUpdates/tree/tableUpdate
The view is rendered server side using jade. The components that need changing, I send a json from the server side, parse it on the client side and only update the required component using JavaScript.
In server.js, you can see the json in variable currencies I put together and then emit. On the client it is received and handled in public/javascript/buildtable.js
I have uploaded the latest code - server.js runs randomChanges() every second and sends random JSON data to the clients. The clients upon receiving rebuild a table. Hope this is what you are looking for.
回答2:
There are some workarounds for using jade on the client-side. You might be able to take advantage of these two modules:
- browserify
- jadeify
This allows you to do something like this client-side:
var $ = require('jquery');
var jadeify = require('jadeify');
var msg = jadeify('msg.jade', {
title : 'foo',
body : 'bar baz quux'
}).appendTo($('#messages'));
回答3:
I have node.js, c#, PHP and Python teams on staff so I have to keep generalized solutions in mind lot of times so I try to think that way instead of being so specific to node.js itself. Keep that in mind before doinking me if you don't like this.
You can do an end around by separating your data and your UI using JavaScript. List the script source on your page and give it a random querystring value but its actually going to a server-side code that is getting your data.
<script src="/mypagedata?ran=[put random here to avoid caching]"></script>
<script src="/displaypagedata.js"></script>
Have the script source have a value inside it such as:
window.pageData = { [whatever] };
Then have the "/displaypagedata.js" do the replacing of the number values on your page. This way you can keep your view static. You could also code "/displaypagedata.js" to use long polling after window load to the same "/mypagedata" by continuously requesting to load the script file. I recommend using jQuery.getScript as it has an event handler to know when to attempt another load.
来源：https://stackoverflow.com/questions/8460121/updating-server-side-rendering-client-side