fivesixty/Templating.html

## Templating.html
<!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>
	<!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}}<div>{{>peopleTemplate}}</div>{{/people}}"
	);
	Eventful.Templates.add("peopleTemplate",
	"<h2>{{firstName}} ({{fullname}})</h2>"+
	"<ul>{{#children}}<li>{{.}}</li>{{/children}}</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>