Templating Questions
You can ignore files with the watch.
Now shows how he does the rendering on the browser.
/web/js/Pages.jsM around line 42:
// ajaxify links
// use it with any links that is NOT data-ignore
$body.on("click","a:not([data-ignore])",function click(evt){
var href = evt.currentTarget.getAttribute("href");
// disable JS-only (or just empty) links
if (evt.currentTarget.getAttribute("href") === "#") {
evt.preventDefault();
evt.stopImmediatePropagation();
}
// recognized page?
// get the href as an internal page
else if (recognize(href) !== false) {
evt.preventDefault();
evt.stopImmediatePropagation();
// run gotoPage
gotoPage(href);
}
});
Then gotoPage:
function gotoPage(url,suppressHistory,initData) {
var content_html, page_url;
page_url = recognize(url);
if (page_url !== false) {
if (page_url !== current_page_url) {
// teardown the existing page
pageScriptAPI(current_page_url).teardown();
context.Events.emit("notify.reset");
current_page_url = page_url;
// magic happens here
// use the same getPageContentHTML
// as getPageHTML on the server
context.View.getPageContentHTML(url,null,{
suppressHistory: suppressHistory,
initData: initData
})
.val(pageContentHTML)
.or(pageContentHTMLError);
return;
}
}
if (url !== context.document.location.href.toString()) {
context.document.location.href = url;
current_page_url = getPageURL(url);
}
}
Ember: One of the big three front-end, rendering frameworks. Ember is overkill for what he does.React is awesome. But it's a much bigger hammer than what most people need.
Ember recently updated it's rendering engine, called Glimmer. It figures out the minimal template partial that needs to be re-rendered. That's exactly why he built Grips five years ago. to do the same thing.
Now Ember has a server-side tool, where you can run their rendering on Node. It's based on the same ideas that Kyle presents in this workshop.
Initial rendering on the server, then progressively letting the browser take over.