I'm new to Pure and still learning how it works, but here is what I was
starting with and I was trying to see if I could do more with it using
functions.
This all works.
var jsonData = {
resourceType: 'Resources',
resources: [
{ name: 'Mastering Foo', desc: 'How to become a master at Foo' },
{ name: 'Bar made easy', desc: 'Becoming proficient in Bar' },
{ name: 'Cat Explained', desc: 'A full description of Cat' },
{ name: 'Dog 101', desc: 'An introduction to Dog' }
]
};
var resourceDirectives = { // individual resource directives
'h4 a': 'resource.name',
'.desc' : 'resource.desc'
};
var combinedDirectives = { // all directives for the doc
'h2': 'resourceType',
'.articles li:first-child': {
'resource<-resources': resourceDirectives // using the individual
directives above
}
};
var resourceTemplateFn; // defined later, is used to render an individual
item
function appendResource(resource) {
var resourceObj = { resource: resource }; // pure's directive starts with
resource
window.jQuery('#content
.articles').append(resourceTemplateFn(resourceObj));
}
// precompile and save this for use with append/update
resourceTemplateFn = window.jQuery('#content .articles
li:first-child').compile(resourceDirectives);
window.jQuery('#content').directives(combinedDirectives).render(jsonData);
// render the page
// then here I am simulating web socket events coming in to append resources
setTimeout(function () { appendResource({ name: 'Egg', desc: 'How to fry an
Egg' }); }, 2000); // pretend if came from event
--------
So the next logical step would be to be able to use function directly in
the iteration allowing programatic control in the loop.
Thus instead the code becomes something like:
var resourceDirectives = { // individual resource directives
'h4 a': 'resource.name',
'.desc' : 'resource.desc'
};
// precompile and save this for use with append/update
var resourceTemplateFn = window.jQuery('#content .articles
li:first-child').compile(resourceDirectives);
var combinedDirectives = { // all directives for the doc
'h2': 'resourceType',
'.articles li:first-child': {
'resource<-resources': resourceTemplateFn // using the individual
precompiled fn
}
};
// and the same precompiled fn is used for appends later
function appendResource(resource) {
var resourceObj = { resource: resource }; // pure's directive starts with
resource
window.jQuery('#content
.articles').append(resourceTemplateFn(resourceObj));
}
