render associative data from
level-assoc
with hyperkey
for live server+client rendering with progressive enhancement
example
In the browser, just load hyperkey
render modules and specify nested rendering sub-components. In this case,
each hackerspace has a nested collection of hackers:
And the shared hyperkey rendering code and
html looks like:
<divclass="hacker">
<iclass="name"></i>
</div>
var hyperkey =require('hyperkey');
var fs =require('fs');
var html =fs.readFileSync(__dirname+'/hacker.html');
module.exports=function(){
returnhyperkey(html,function(row){
return{'.name':row.name};
});
};
<divclass="hackerspace">
<h1class="name"></h1>
<divclass="hackers"></div>
</div>
var hyperkey =require('hyperkey');
var fs =require('fs');
var html =fs.readFileSync(__dirname+'/hackerspace.html');
var hacker =require('./hacker.js');
module.exports=function(){
returnhyperkey(html,function(row){
return{
'.name':row.name,
'.hackers':(function(stream){
return{
'data-start':stream.startKey,
'data-end':stream.endKey,
_html:stream.pipe(hacker())
};
})(row.hackers())
};
});
};
Compile the browser code with browserify
and brfs and then your nested collections will
automatically update as the data changes on the server while preserving
server-side rendering!
methods
var rassoc =require('render-assoc');
rassoc(render, subRenderers)
Create a writable stream for assoc.track() data to be written to across a
websocket from a
hyperkeyrender function and an object
of subRenders mapping assocation types to sub-collection render functions.
In a later release this will be more generalized to account for multiple render
targets through the same stream.