Is it possible to use a pure template fn as the iteration action for loops?

43 views
Skip to first unread message

Jeff Barczewski

unread,
Jan 25, 2012, 4:05:33 PM1/25/12
to Pure-Unobtrusive...@googlegroups.com
I like the fact that you can use JS functions as an action for a directive, but is there anyway to do this for loops?

For instance it would be nice to be able to define a function that renders a particular item.

var itemFn = pure(itemTempl).compile(itemDirectives);

then be able to use that during a loop of items.


item <- items: itemFn  // or something like this


That way the itemFn can be used separately for in-place updates, appends, etc and also be the same thing used in a loop.


Thoughts or alternative ideas?

Thanks,

Jeff

Mic (BeeBole)

unread,
Jan 25, 2012, 4:17:26 PM1/25/12
to JavaScript Templates Engine PURE
That is interesting. Do you have a practical example in mind?

'li':{
'row<-rows':function(){
//what would happen to the LI here, something else?
}
}



On Jan 25, 10:05 pm, Jeff Barczewski <jeff.barczew...@gmail.com>
wrote:

Jeff Barczewski

unread,
Jan 25, 2012, 5:01:34 PM1/25/12
to Pure-Unobtrusive...@googlegroups.com
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));
}

Jeff Barczewski

unread,
Jan 25, 2012, 5:03:02 PM1/25/12
to Pure-Unobtrusive...@googlegroups.com
and what I didn't show would be that you could do more complicated things, like you do with js functions now.

Mic (BeeBole)

unread,
Jan 25, 2012, 5:22:15 PM1/25/12
to JavaScript Templates Engine PURE
I'll check your example tomorrow(it is bed time here...)
But you can reference directives directly, or call a function that
does something on it.
All this happens before the compilation, while the function inside are
called at rendering time.

Here is an example of direct reference:

<body>
<!-- HTML template -->
<div>
Hello <span></span>
<ul>
<li></li>
</ul>
</div>
<script>
var li = {
'row<-rows':{
'.':'row'
}
},
directive = {
span:'who',
li:li //<- reference to another directive
};
var data = {
who:'wrrrld!',
rows:[1, 2, 3]
};
$('div').render(data, directive);

</script>
</body>

On Jan 25, 11:03 pm, Jeff Barczewski <jeff.barczew...@gmail.com>
wrote:

Jeff Barczewski

unread,
Jan 25, 2012, 6:26:02 PM1/25/12
to Pure-Unobtrusive...@googlegroups.com
Thanks Mic, but actually that is the part I already have working (directives referring to another set of directives).

I was just wondering if there would be any way to go beyond that similar to the way you can use functions for actions, but at the iteration level.

I worked around it for now, but was wondering if it could be done.

I'll have to poke around in the code more.

Thanks,

Jeff
Reply all
Reply to author
Forward
0 new messages