test/with_jquery.js
test/with_mootools.js
test/with_sizzle.js
test/with_sly.js
@@ -46,8 +46,11 @@ $p.core = function(sel, ctxt, plugins){
plugins._error = error;
// set the signature string that will be replaced at render time
- var Sig = 'r' + Math.floor( Math.random() * 1000000 ) + 'S';
-
+ var Sig = '_s' + Math.floor( Math.random() * 1000000 ) + '_';
+
+ // keep the json data root
+ var json;
+
return plugins;
/*
@@ -197,17 +200,19 @@ $p.core = function(sel, ctxt, plugins){
// wrap in an object the target node/attr and their properties
function gettarget(dom, sel, isloop){
var osel, prepend, selector, attr, append, target = [];
- if(typeof sel === 'string'){
+ if( typeof sel === 'string' ){
osel = sel;
// e.g. "+tr.foo[class]"
var m = sel.match(/^\s*([\+=])?(((\+[^\[])|[^\[\+])*)(\[([^\]]*)\])?([\+=])?\s*$/);
- if(!m){
- error('bad selector: ' + sel);
+ if( !m ){
+ error( 'bad selector: ' + sel );
}
- var prepend = m[1],
- selector = m[2],
- attr = m[6],
- append = m[7];
+
+ prepend = m[1];
+ selector = m[2];
+ attr = m[6];
+ append = m[7];
+
if(selector === '.' || ( selector === '' && typeof attr !== 'undefined' ) ){
target[0] = dom;
}else{
@@ -217,35 +222,46 @@ $p.core = function(sel, ctxt, plugins){
return {attr: null, nodes: target, set: null, sel: osel};
}
}else{
+ // autoRender node
prepend = sel.prepend;
attr = sel.attr;
append = sel.append;
target = [dom];
}
- var mode = (attr || isloop) ? 'self' : 'contents';
- if(prepend || append){
- if(prepend && append){
- error('conflicting append/prepend/replace modifiers');
- }
- if(isloop){
+
+ if( prepend || append ){
+ if( prepend && append ){
+ error('append/prepend cannot take place at the same time');
+ }else if( isloop ){
error('no append/prepend/replace modifiers allowed for loop target');
- }
- var c = prepend || append;
- mode = c === '=' ? 'self' : (append ? 'append' : 'prepend');
- if(mode === 'append' && isloop){
+ }else if( append && isloop ){
error('cannot append with loop (sel: ' + osel + ')');
}
}
// we need 'root' selector because CSS search never finds the root element.
var setstr, getstr, quotefn;
if(attr){
- getstr = function(node){return node.getAttribute(attr);};
- setstr = function(node, s){node.setAttribute(attr, s);};
+ getstr = function(node){
+ if((/^style$/i).test(attr)){
+ var css = node.style.cssText;
+ node.removeAttribute( 'style' );
+ return css;
+ }else{
+ return node.getAttribute(attr);
+ }
+ };
+ setstr = function(node, s){
+ if((/^style$/i).test(attr)){
+ node.setAttribute( attr + Math.floor( Math.random() * 100000 ), s );
+ }else{
+ node.setAttribute(attr, s);
+ };
+ };
quotefn = function(s){
return s.replace(/\"/g, '"').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
};
}else{
- if(mode === 'self'){
+ if(isloop){
setstr = function(node, s){
// we can have a null parent node
// if we get overlapping targets.
@@ -258,23 +274,18 @@ $p.core = function(sel, ctxt, plugins){
}
};
}else{
- getstr = function(node){return node.innerHTML;};
- setstr = function(node, s){node.innerHTML = s;};
+ getstr = function(node){ return node.innerHTML; };
+ setstr = function(node, s){ node.innerHTML = s; };
}
- quotefn = function(s){return s;};
+ quotefn = function(s){ return s; };
}
var setfn;
- switch(mode){
- case 'prepend':
- setfn = function(node, s){setstr(node, s + getstr(node));};
- break;
- case 'self':
- case 'contents':
- setfn = function(node, s){setstr(node, s);};
- break;
- case 'append':
- setfn = function(node, s){setstr(node, getstr(node) + s);};
- break;
+ if(prepend){
+ setfn = function(node, s){ setstr( node, s + getstr( node ) );};
+ }else if(append){
+ setfn = function(node, s){ setstr( node, getstr( node ) + s );};
+ }else{
+ setfn = function(node, s){ setstr( node, s );};
}
return {attr: attr, nodes: target, set: setfn, sel: osel, quotefn: quotefn};
}
@@ -283,26 +294,28 @@ $p.core = function(sel, ctxt, plugins){
var sig = Sig + n + ':';
for(var i = 0; i < target.nodes.length; i++){
// could check for overlapping targets here.
- target.set(target.nodes[i], sig);
+ target.set( target.nodes[i], sig );
}
}
// read de loop data, and pass it to the inner rendering function
function loopfn(name, dselect, inner){
return function(ctxt){
- var a = dselect(ctxt);
- var oldvctxt = ctxt[name];
- var vctxt = {items: a};
- ctxt[name] = vctxt;
- var n = (a && a.length) || 0;
- var strs = [];
+ var a = dselect(ctxt),
+ n = (a && a.length) || 0,
+ loopCtxt={ json:ctxt.json },
+ strs = [];
+ loopCtxt[name] = { items:a };
+
for(var i = 0; i < n; i++){
- ctxt.pos = vctxt.pos = i;
- ctxt.item = vctxt.item = a[i];
- strs.push(inner(ctxt));
+ loopCtxt.data = ctxt.data;
+ loopCtxt.pos = loopCtxt[ name ].pos = i;
+ loopCtxt.item = loopCtxt[ name ].item = a[ i ];
+ strs.push( inner( loopCtxt ) );
}
- ctxt[name] = oldvctxt;
+
return strs.join('');
+
};
}
@@ -406,7 +419,7 @@ $p.core = function(sel, ctxt, plugins){
var fns = [];
ans = ans || data && getAutoNodes(dom, data);
if(data){
- var j, jj, cspec, n;
+ var j, jj, cspec, n, target, nodes, itersel, node, inner;
while(ans.length > 0){
cspec = ans[0].cspec;
n = ans[0].n;
@@ -416,12 +429,12 @@ $p.core = function(sel, ctxt, plugins){
setsig(target, fns.length);
fns[fns.length] = wrapquote(target.quotefn, dataselectfn(cspec.prop));
}else{
- var itersel = dataselectfn(cspec.sel);
- var target = gettarget(n, cspec, true);
- var nodes = target.nodes;
+ itersel = dataselectfn(cspec.sel);
+ target = gettarget(n, cspec, true);
+ nodes = target.nodes;
for(j = 0, jj = nodes.length; j < jj; j++){
- var node = nodes[j];
- var inner = compiler(node, false, data, ans);
+ node = nodes[j];
+ inner = compiler(node, false, data, ans);
fns[fns.length] = wrapquote(target.quotefn, loopfn(cspec.sel, itersel, inner));
target.nodes = [node];
setsig(target, fns.length - 1);
@@ -444,14 +457,21 @@ $p.core = function(sel, ctxt, plugins){
}
}
- var h = outerHTML(dom);
- var parts = h.split(Sig);
- var pfns = [];
+ var h = outerHTML( dom ),
+ checkStyle = new RegExp( 'style[0-9]+="?' + Sig ),
+ pfns = [];
+
+ // style attribute cannot be set using setAttribute
+ if( checkStyle.test( h ) ){
+ h = h.replace( checkStyle, 'style="' + Sig );
+ }
+
+ var parts = h.split( Sig ), p;
for(var i = 1; i < parts.length; i++){
- var p = parts[i];
+ p = parts[i];
// part is of the form "fn-number:..." as placed there by setsig.
pfns[i] = fns[parseInt(p, 10)];
- parts[i] = p.slice(p.indexOf(':') + 1, p.length);
+ parts[i] = p.substring(p.indexOf(':')+1);
}
return concatenator(parts, pfns);
}
@@ -463,8 +483,10 @@ $p.plugins = {
// return a function waiting the data as argument
compile:function(directive, ctxt, template){
var rfn = this._compiler( ( template || this[0] ).cloneNode(true), directive, ctxt);
+ var json;
return function(data){
- return rfn({data: data});
+ json = json || data;
+ return rfn({data: data, json:json});
};
},
//compile with the directive as argument
libs/pure2.js
@@ -4,15 +4,16 @@
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>PURE Unobtrusive Rendering Engine for HTML - Version 2</title>
<style>
- .exampleList{padding:0;list-style-type:none;}
+ .exampleList{padding:0; list-style-type:none;}
- h3{margin:1em 0 0;float:left;}
+ h3{margin:1em 0 .3em;float:left;}
a{color:#369;text-decoration:none;}
a:hover{background:#369;color:#FFF;}
.run, .debug{ display:block; float:left;margin:1.3em 0 0 .5em;padding:0 .5em;}
.template{clear:both;padding:1em;background:#DEF;margin:0 0 0 1em;}
+
#examples{display:none;}
</style>
<script src="../libs/pure2.js"></script>
@@ -22,9 +23,11 @@
<div id="chooseLib" style="height:2em">
Choose a library to run the examples:
+ <input class="lib" type="button" onclick="loadLib('domassistant');" value="DomAssistant" />
<input class="lib" type="button" onclick="loadLib('jQuery');" value="jQuery" />
- <input class="lib" type="button" onclick="loadLib('mootools');" value="mootools" />
- <input class="lib" type="button" onclick="loadLib('sizzle');" value="sizzle" />
+ <input class="lib" type="button" onclick="loadLib('mootools');" value="Mootools" />
+ <input class="lib" type="button" onclick="loadLib('prototype');" value="Prototype" />
+ <input class="lib" type="button" onclick="loadLib('sizzle');" value="Sizzle" />
<input class="lib" type="button" onclick="loadLib('Sly');" value="Sly" />
</div>
@@ -35,7 +38,7 @@
<h3>Hello World</h3>
<div class="template">
- <div class="who" />
+ <div class="who"></div>
</div>
<script>
@@ -69,10 +72,10 @@
<h3>Auto Rendering with loops (+ directives)</h3>
<div class="template">
<div class="friends">
- The friends of <a target="_blank" class="who"></a> are
+ The friends of <a target="_blank" href="http://twitter.com/" class="who"></a> are
<ul>
<li class="friend">
- <a target="_blank" class="name twitter@href+" href="http://twitter.com/"></a>
+ <a target="_blank" class="name twitter@title twitter@href+" href="http://twitter.com/"></a>
</li>
</ul>
</div>
@@ -83,25 +86,23 @@
template:'div.friends',
directive:{
'.who':'who2.name',
- '.who[href]':'http://twitter/#{who2.twitter}'
+ '.who[title]':'See the tweets of #{who2.twitter}',
+ '.who[href]+':'who2.twitter'
},
data:{
friend:[
{
name:'Hughes',
- twitter:'hugheswaroquier',
- knowledges:['erlang', 'js', 'css']
+ twitter:'hugheswaroquier'
},{
name:'Yves',
- twitter:'yveshiernaux',
- knowledges:['js', 'css', 'HTML', 'buzz']
+ twitter:'yveshiernaux'
}
],
who:'dono',
who2:{
name:'Mic',
- twitter:'tchvil',
- knowledges:['js', 'css', 'HTML']
+ twitter:'tchvil'
}
}
};
@@ -125,6 +126,12 @@
</tbody>
</table>
</div>
+ <style>
+ .playerList td{
+ padding:0 1em;
+ border:1px solid #999;
+ }
+ </style>
<script>
var ex04 = {
@@ -175,16 +182,22 @@
</tbody>
</table>
</div>
-
+ <style>
+ .partialTable td{
+ padding:0 1em;
+ border:1px solid #999;
+ }
+ </style>
<script>
var ex05 = {
template:'table.partialTable',
data:{
cols:['name', 'food', 'legs'],
animals:[
- {name:'cat', food:'mouse', legs:4},
- {name:'mouse', food:'cheese', legs:4},
- {name:'dog', food:'bones', legs:4}
+ {name:'bird', food:'seed', legs:2},
+ {name:'cat', food:'mouse, bird', legs:4},
+ {name:'dog', food:'bone', legs:4},
+ {name:'mouse', food:'cheese', legs:4}
]
},
directive1:{
@@ -244,6 +257,15 @@
</table>
</div>
</div>
+ <style>
+ .teamPlace table{
+ width:100%;
+ }
+ .scoreBoard td{
+ padding:0 1em;
+ border:1px solid #999;
+ }
+ </style>
<script>
var ex06 = {
@@ -300,52 +322,51 @@
</li>
- <li>
+ <li class="ex07">
<h3>Recursion</h3>
<div class="template">
- <div class="htmlDoc">
- <ul class="treeItem">
- <li>
- <a class="name" href="#">name</a>
- <div class="children"></div>
- </li>
- </ul>
- </div>
+ <ul class="treeItem">
+ <li>
+ <a class="name" href="#">name</a>
+ <div class="children"></div>
+ </li>
+ </ul>
</div>
-
<script>
- var data4 = {
- children: [{
- name: 'Europe',
+ var ex07 = {
+ template:'ul.treeItem',
+ data:{
children: [{
- name: 'Belgium',
+ name: 'Europe',
children: [{
- name: 'Brussels'},{
- name: 'Namur'},{
- name: 'Antwerpen'}]},{
- name: 'Germany'},{
- name: 'UK'}]},{
- name: 'America',
- children: [{
- name: 'US',
+ name: 'Belgium',
+ children: [{
+ name: 'Brussels'},{
+ name: 'Namur'},{
+ name: 'Antwerpen'}]},{
+ name: 'Germany'},{
+ name: 'UK'}]},{
+ name: 'America',
children: [{
- name: 'Alabama'},{
- name: 'Georgia'}]},{
- name: 'Canada'},{
- name: 'Argentina'}]},{
- name: 'Asia'},{
- name: 'Africa'},{
- name: 'Antarctica'}
- ]
- };
-
- var directive4 = {
- 'li': {
- 'child <- children': {
- 'a': 'child.name',
- 'a[onclick]':'alert(\'#{child.name}\');',
- 'div.children': function(ctxt){
- return ctxt.child.item.children ? countries(ctxt.child.item):'';
+ name: 'US',
+ children: [{
+ name: 'Alabama'},{
+ name: 'Georgia'}]},{
+ name: 'Canada'},{
+ name: 'Argentina'}]},{
+ name: 'Asia'},{
+ name: 'Africa'},{
+ name: 'Antarctica'}
+ ]
+ },
+ directive:{
+ 'li': {
+ 'child <- children': {
+ 'a': 'child.name',
+ 'a[onclick]':'alert(\'#{child.name}\');',
+ 'div.children': function(ctxt){
+ return ctxt.child.item.children ? countries(ctxt.child.item):'';
+ }
}
}
}
test/testPage.html
@@ -1,6 +1,6 @@
function loadLib(lib){
- document.getElementById('chooseLib').innerHTML += ' Loading' + lib;
- loadScript(['../libs/'+lib+'.js', 'with'+lib+'.js']);
+ document.getElementById( 'chooseLib' ).innerHTML += ' Loading... ' + lib;
+ loadScript([ '../libs/' + lib + '.js', 'with_' + lib + '.js' ]);
var cnt = 0;
function loadScript(srcs){
if(srcs.length > 0){
@@ -20,9 +20,9 @@ function loadLib(lib){
}
}
function done(){
- document.getElementById('chooseLib').innerHTML = lib + ' loaded. You can now run the examples below.';
- document.getElementById('examples').style.display = 'block';
- var lis = $p('ul.exampleList li'),
+ document.getElementById( 'chooseLib' ).innerHTML = lib + ' loaded. You can now run the examples below.';
+ document.getElementById( 'examples' ).style.display = 'block';
+ var lis = $p( 'ul.exampleList li' ),
lii,
cn,
span;
@@ -35,7 +35,7 @@ function loadLib(lib){
var h = $p('h3', lii);
if(h[0]){
h = h[0];
- span = document.createElement('SPAN');
+ span = document.createElement( 'SPAN' );
h.parentNode.insertBefore(span, h.nextSibling);
var cn = lis[i].className;
window[cn].id = cn;
test/testPage.js
test/withJquery.js
test/withMootools.js
test/withSizzle.js
test/withSly.js
4e5c4f35972ec1b950b8c3215b1131a9df11e3a6
mic
mic@beebole.com
http://github.com/pure/pure/commit/26534c45225948a44beb7b80f4605b39024f956b
26534c45225948a44beb7b80f4605b39024f956b
2009-06-25T15:58:42-07:00
2009-06-25T15:58:42-07:00
add other libraries. style attr. code cleaning
3b39d2f9fa2acd2ccfa89272b920fc2262238a41
mic
mic@beebole.com