Created
March 26, 2012 21:53
-
-
Save troygoode/2210032 to your computer and use it in GitHub Desktop.
o_O
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment