Skip to content

Instantly share code, notes, and snippets.

@nicerobot

nicerobot/how-pure-should-work.html

Created May 27, 2012 08:17
Show Gist options
  • Save nicerobot/2802806 to your computer and use it in GitHub Desktop.
Save nicerobot/2802806 to your computer and use it in GitHub Desktop.
Download ZIP
This is how Pure should work. Please do away with javascript directives and implement them declaratively as HTML.
Raw
how-pure-should-work.html
<html>
<head>
<title>PURE Unobtrusive Rendering Engine</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://raw.github.com/pure/pure/master/libs/pure_min.js"></script>
</head>
<body>
<!--
data-pure-declare are converted into Pure directives and
are literally the HTML template for the data.
-->
<li data-pure-declare="animals">
<!--
The context of the template's body is the data passed to render().
If the data is an array, the entire template will be cloned
and interpolated once for each element of the array.
-->
<span class="name">${this.name}</span>
</li>
<li data-pure-declare="beasts">
Beast: <span class="name">${this.name}</span>
</li>
<div data-pure-declare="title">
<!--
If the data is an object or scalar, the entire interpolated
template replaces the node.
-->
${this.title}
</div>
<!--
Here begins the HTML in which the declarations will be used.
-->
<!--
data-pure is the name of a data-pure-declare node.
data-pure-data is the reference to the data elements. If this is
excluded, the name of the declaration is used.
-->
<div data-pure="title"></div>
<ul>
<li data-pure="animals" data-pure-sort="legs"></li>
</ul>
<ul>
<li>
<ul>
<li data-pure-data="this.animals" data-pure="beasts" data-pure-filter="beasts"></li>
</ul>
</li>
</ul>
<script>
var data = {
title:"This is how Pure should work",
animals:[
{name:'bird', legs:2},
{name:'cat', legs:4},
{name:'dog', legs:4},
{name:'mouse', legs:4},
{name:'shark', legs:0},
{name:'spider', legs:8}
],
_sorting:{
legs:function(a, b){ return a.legs > b.legs ? 1 : a.legs < b.legs ? -1 : 0; }
},
_filters:{
beasts:function(a) { return a in ['cat','dog']; }
}
};
$p.render(data);
</script>
</body>
</html>
Raw
how-the-pure-twitter-example-should-work.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://raw.github.com/pure/pure/master/libs/pure_min.js"></script>
<script>
var data =
{
"friends":[
{
"name":"Hughes",
"twitter":"hugheswaroquier"
},
{
"name":"Yves",
"twitter":"yveshiernaux"
}
],
"who":{
"name":"Mic",
"twitter":"tchvil"
}
}
$(document).ready(function () {
$('a').click(function () {
_gaq.push(['_trackEvent', 'outbound-article', 'twitter.com']);
});
});
</script>
</head>
<body>
<a data-pure-declare="twitter" target="_blank" class="name twitter" href="http://twitter.com/${this.twitter}"
title="See ${this.name}'s tweets @${this.twitter}">
${this.name}
</a>
<li data-pure-declare="friends">
<a class="friend" data-pure="twitter" data-pure-data="this"></a>
</li>
<div class="friends">
<p>The friends of <a class="who" data-pure="twitter" data-pure-data="who"></a>
are</p>
<ul>
<li class="friend" data-pure="friends"></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment