troygoode/example1.html

## example1.html
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>

    <!-- this is the DOM template for our o_O app below -->
    <div id="team">
      <p bind='text: teamname(); css: css()' />
      <ul bind='foreach: people'>
        <li bind='click: showAlertBox'>
          <strong bind='text: name'></strong>
          <span bind='text: "(" + title + ")"'></span>
        </li>
      </ul>
      <p bind='visible: !people.count()'>Nobody on the team.</p>
    </div>

    <!-- o_O depends on jquery or whatever else is bound to '$' -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://raw.github.com/weepy/o_O/master/o_O.js"></script>

    <script>
      // create an model that we'll bind to our template
      var team = {
        teamname: o_O.property('Unknown Team'),
        css: o_O.property({}),
        people: o_O.Collection()
      };

      // bind the model to a template (note you can bind the model to multiple templates if needed)
      o_O.bind(team, '#team');

      // here we're updating the model's properties to add a new person to the team and some other stuff
      window.setTimeout(function(){
        team.teamname('My Team');

        team.people.add({
          title: 'Manager',
          name: 'Troy',
          showAlertBox: function(){
            alert(this.title);
          }
        });
      }, 600);

      // add another person
      window.setTimeout(function(){
        team.people.add({
          title: 'Sr. Developer',
          name: 'Josh',
          showAlertBox: function(){
            alert(this.title);
          }
        });
      }, 1200);

      // add yet another person, change the team title again and the background color
      window.setTimeout(function(){
        team.teamname('TEAM VIRGINIA');
        team.css({
          'background-color': 'grey'
        });
        team.people.add({
          title: 'Developer',
          name: 'Brad',
          showAlertBox: function(){
            alert(this.title);
          }
        });
      }, 1600);

      window.team = team; // for debugging in console
    </script>

  </body>
</html>

## example2.js
// alternate way to create a model
var Team = o_O.Model({
    teamname: 'Unknown Team',
    css: {}
  },{
    initialize: function(){
      this.people = o_O.Collection();
    }
  });
var team = new Team();

// bind the model to a template (note you can bind the model to multiple templates if needed)
o_O.bind(team, '#team');
	<!DOCTYPE html>
	<html>
	<head>
	<title>Example</title>
	</head>
	<body>

	<!-- this is the DOM template for our o_O app below -->
	<div id="team">
	<p bind='text: teamname(); css: css()' />
	<ul bind='foreach: people'>
	<li bind='click: showAlertBox'>
	<strong bind='text: name'></strong>
	<span bind='text: "(" + title + ")"'></span>
	</li>
	</ul>
	<p bind='visible: !people.count()'>Nobody on the team.</p>
	</div>

	<!-- o_O depends on jquery or whatever else is bound to '$' -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://raw.github.com/weepy/o_O/master/o_O.js"></script>

	<script>
	// create an model that we'll bind to our template
	var team = {
	teamname: o_O.property('Unknown Team'),
	css: o_O.property({}),
	people: o_O.Collection()
	};

	// bind the model to a template (note you can bind the model to multiple templates if needed)
	o_O.bind(team, '#team');

	// here we're updating the model's properties to add a new person to the team and some other stuff
	window.setTimeout(function(){
	team.teamname('My Team');

	team.people.add({
	title: 'Manager',
	name: 'Troy',
	showAlertBox: function(){
	alert(this.title);
	}
	});
	}, 600);

	// add another person
	window.setTimeout(function(){
	team.people.add({
	title: 'Sr. Developer',
	name: 'Josh',
	showAlertBox: function(){
	alert(this.title);
	}
	});
	}, 1200);

	// add yet another person, change the team title again and the background color
	window.setTimeout(function(){
	team.teamname('TEAM VIRGINIA');
	team.css({
	'background-color': 'grey'
	});
	team.people.add({
	title: 'Developer',
	name: 'Brad',
	showAlertBox: function(){
	alert(this.title);
	}
	});
	}, 1600);

	window.team = team; // for debugging in console
	</script>

	</body>
	</html>
	// alternate way to create a model
	var Team = o_O.Model({
	teamname: 'Unknown Team',
	css: {}
	},{
	initialize: function(){
	this.people = o_O.Collection();
	}
	});
	var team = new Team();

	// bind the model to a template (note you can bind the model to multiple templates if needed)
	o_O.bind(team, '#team');