Skip to content

Instantly share code, notes, and snippets.

@c-spencer
Forked from fivesixty/Templating.html
Created July 2, 2010 09:31
Show Gist options
  • Save c-spencer/461150 to your computer and use it in GitHub Desktop.
Save c-spencer/461150 to your computer and use it in GitHub Desktop.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="Eventful.js"></script>
<script type="text/javascript" src="Mustache.js"></script>
</head>
<body>
<div style="float: left; margin-right: 30px;">
<h2>Object Definition</h2>
<pre> var Person = function (name) {
this.set("fullname", name);
}
Person.prototype = new Eventful.Object({
fullname: function(value) {
if (value === undefined) {
return this.firstName + " " + this.secondName;
} else {
var parts = value.split(" ");
this.set("firstName", parts.shift());
this.set("secondName", parts.join(" "));
}
}.dependsOn("firstName", "secondName")
});
var personObj = new Person("Chris Spencer");
personObj.set("children", new Eventful.Array("Un", "Deux", "Trois"));
var arrayView = new Eventful.Object({
people: new Eventful.Array()
});
</pre>
<h2>Templates and Binding</h2>
<pre> Eventful.Templates.add("peopleList",
"{{#people}}&lt;div>{{>peopleTemplate}}&lt;/div>{{/people}}"
);
Eventful.Templates.add("peopleTemplate",
"&lt;h2>{{firstName}} ({{fullname}})&lt;/h2>"+
"&lt;ul>{{#children}}&lt;li>{{.}}&lt;/li>{{/children}}&lt;/ul>"
);
Eventful.Templates.bindTemplate("peopleList", arrayView, "arrayContainer");
Eventful.Templates.bindTemplate("peopleTemplate", personObj, "testContainer");
</pre>
<h2>Asynchronous Operations</h2>
<pre>
arrayView.get("people")
.delay(1500, "push", personObj)
.delay(3000, "push", personObj);
personObj
.delay(4000, "set", "fullname", "Chaz Special")
.get("children").delay(6000, "push", "f");
</pre>
</div>
<div id="arrayContainer"></div>
<div id="testContainer"></div>
<script type="text/javascript">
/**
* Setup some templates.
**/
Eventful.Templates.add("peopleList",
"{{#people}}<div>{{>peopleTemplate}}</div>{{/people}}"
);
Eventful.Templates.add("peopleTemplate",
"<h2>{{firstName}} ({{fullname}})</h2>"+
"<ul>{{#children}}<li>{{.}}</li>{{/children}}</ul>"
);
var Person = function (name) {
this.set("fullname", name);
}
Person.prototype = new Eventful.Object({
fullname: function(value) {
if (value === undefined) {
return this.firstName + " " + this.secondName;
} else {
var parts = value.split(" ");
this.set("firstName", parts.shift());
this.set("secondName", parts.join(" "));
}
}.dependsOn("firstName", "secondName")
});
/**
* Create something to bind onto.
* fullname demonstrates settable calculated properties.
**/
var personObj = new Person("Chris Spencer");
personObj.set("children", new Eventful.Array("Un", "Deux", "Trois"));
var arrayView = new Eventful.Object({
people: new Eventful.Array()
});
/**
* Do some binding.
**/
Eventful.Templates.bindTemplate("peopleList", arrayView, "arrayContainer");
Eventful.Templates.bindTemplate("peopleTemplate", personObj, "testContainer");
/**
* Do some assignments to check templates are redrawn properly.
**/
arrayView.get("people")
.delay(1500, "push", personObj)
.delay(3000, "push", personObj);
personObj
.delay(4000, "set", "fullname", "Chaz Special")
.get("children").delay(6000, "push", "Quatre");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment