<!-- This is the main html file for the guess a number game It sets up a div as an attachment point for the view Includes some helper CSS, and loads the necessary javascript files --> <!doctype html> <html> <head> <title>Guess a number</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/contacts.css"> </head> <body> <div id="guessView" ></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script src="js/can.jquery.js"></script> <script src="js/can.fixture.js"></script> <script src="js/guess.js"></script> </body></html> |
// This is the application code for "guess a number' // This sets up a callback triggered at the end of document load // All can setup needs to be done after the DOM is ready $(document).ready(function(){ // This creates a new instance of the Guess controller // Its view will be affixed to the div named guessView in // the index.html and the observable GuessData will be passed // in for its use as the 'data' field on this.options new Guess('#guessView',{data:GuessData}); }); // This defines an obervable data block that has two fields // The first is a message that will be displayed in the view // The second is a random number between 0 and 99 inclusive // that is hidden from the user // The point of the game is to guess this random number var GuessData = new can.Observe({ message: "Enter a guess: ", guess: Math.floor(Math.random()*100) }); // This creates a constructor called Guess that can create // a guess controller when new'd. It is used in the document loaded // callback above to instance an actual controller Guess = can.Control({ // The init function is called when an instance is new'd init: function(){ // can.vew compiles the view ejs // this.element.html attaches the compiled view at the dom point // specified in the constructor call this.element.html(can.view('views/guessView.ejs',{ myData:this.options.data })); }, // This method is automagically attached to the controller's associated // div and calls back to this function on form submit // It returns false to prevent actual submission to the web server "submit": function(event){ DoGuess(parseFloat(document.myform.guess.value),this.options.data); document.myform.guess.value=""; return false; // short circuit submit } }); // This function checks the guess and updates the message field // IMPORTANT: such updates must be done through obervable.attr(<key>,<new value>) // or they wil not be observed function DoGuess(guess,myData){ if (guess<myData.guess){ myData.attr('message',"Too low, Guess again: "); } else if (guess>myData.guess) { myData.attr('message', "Too High, Guess again: "); } else { myData.attr("message","You got it!"); } } |