Auto-rendering: No more directives needed !!

[Mic (BeeBole)]

It was requested by almost all the active members of this forum.
So here it is, after a very intense week. A brand new method:

pure.autoRender(...)

This new method maps automatically the HTML and the JSON based on the
class attribute.

Download it from http://github.com/pure/pure/downloads/v1.4
Look for the page docs/allExamples.html

The usage of the new method in a classical javascript:
var target = document.getElementById('target1');
var html = document.getElementById('hello');
var data = { "firstName": "Mary" };
target.innerHTML = $p.autoRender( html, data );


The jQuery syntax is as follow:
$('#hello').autoRender({ "firstName": "Mary" });

If either, you want total control over the rendering without any
automation, or if you meet an extremely heavy templates, you can use
pure.render() that will run only with directives.

The autoRender interface is as follow:

$p.autoRender(html, context [,directives]);

html: the html template
context: the JSON data to be transformed
directives: now optional to refine the renderin

And it returns a string with the transformed html.


The jQuery.autoTransform interface is slightly different:

$('#myDiv').autoRender(data);
- merge data and myDiv automatically
- replace myDiv

$('#myDiv').autoRender(data, directives);
- apply the directives
- merge data and myDiv automatically
- replace myDiv

$('#myDiv').autoRender(data, target);
- merge data and myDiv automatically
- replace the target node

$('#myDiv').autoRender(data, directives, target);
- apply the directives
- merge data and myDiv automatically
- replace target

Backward compatibility notes:
- - - - - - - - - - - - - - -
$p.map and $p.compile are now only useful when you want to compile
your template and store them in a js file.
The interface of $p.render(...)has changed, so watch out existing
implementation.

The jQuery.$pRender() has been renamed to a more friendly
jQuery.render()
We'll keep the name of the old method for a while, then delete it.

[Davey]

cool. much appreciated functionality.

now not to bite the hand that feeds...but (you knew there was a 'but'
coming!)

The second/third jQuery choices looks a bit odd to me. It appears to
apply the render to a different element, thereby breaking the
chaining.

surely

$('#myTarget').autoRender(data, directives, $
('#myDiv")).find("span").css('color','red');

- apply the directives
- merge data and myDiv automatically

- replace myTarget
- find all span elements in the rendered content
- set the css property

would be more valuable, and jQuery like, as the rendered content stays
in the chain, rather than the template node.

keep up the good work.
cheers
davey

On Sep 9, 3:49 am, "Mic (BeeBole)" <tch...@gmail.com> wrote:
> It was requested by almost all the active members of this forum.
> So here it is, after a very intense week. A brand new method:
>
>    pure.autoRender(...)
>
> This new method maps automatically the HTML and the JSON based on the
> class attribute.
>

> Download it fromhttp://github.com/pure/pure/downloads/v1.4

[Mic (BeeBole)]

Good call!
In fact it should be always:

target.autoRender( context [, directive, template ] )

Where directives and template are optional.
If no template is provided, target is taken as the template.
And it returns always $(target), either replaced or parsed.

I knew I should have waited before calling it 1.4 :-/
I'll update the source. Thanks a lot.

[Davey]

great. glad i mentioned it. always good to get these kind of
'consistency' things put to bed early.

[Mic (BeeBole)]

Hi Davey,
If you have some time look at http://friendpaste.com/tLpmQCkx
It is your table example revisited.

Line 77, a chaining like this would be great but does not work.

The jQuery/PURE autoRender(...) uses jQuery.replaceWith(...).
Unfortunately the replaceWith() method does not return the transformed
node but the original.
Do you know any jQuery way to replace a node and get back the new one?

The line 79 works fine but we can't call it a syntax improvement ;)

Download the latest zip/tar for testing this:
http://github.com/pure/pure/downloads/master

Cheers,