Demonstrates the templating engine on the browser

  {$define "#content" }

<div id="content">
  <!-- ..  -->
  <p>
		{$partial "#answer" $}
	</p>

</div>

{$}


{$define "#answer" }
	<div rel="js-answer">
		{$insert $.answer $}
	</div>
{$}

Line#16: to access a variable with Grips, use the ​$.​ operator (​$.answer​) So if there's not ​answer​ in the about page, it's just going to render an empty div (my note: not totally sure where ​$.answer​ comes from).

  // **** about.js  ****
(function(context){

// 2. ++++ create renderAnswer
	function renderAnswer(answer) {
	 // to reference the partial, use /...#answer 
		var html = View.getPartialHTML("/about#answer",{
			answer: answer
		});
		// simple jQuery DOM manipulation
		$("[rel='js-answer']").replaceWith(html);
	}

	function gimme(evt){
		var $local = $("[rel='js-local']");
    
    if($local.is(":checked")) {
      // ++-- remove alert and call renderAnswer
      renderAnser( Foo.random() );
    } else {
      $.ajax("/Foo").then(function(resp){
        // ++-- 1. call the rendering
        renderAnser( resp.answer );  
      });
    }
		
	}

	function init(){
		$("[rel='js-gimme']").click(gimme);
	}

	function teardown(){}

	Pages.page_scripts["/about"] = {
		init: init,
		teardown: teardown
	};

})(window);

The way he updates his DOM, is by figuring out the smallest partial that needs to be re-rendered and then he replaces the whole DOM element (line#11 above). Then, if necessary he will rebind his event handlers.