Rendering on the page

In notebook:
FrontEndMasters Organising Javascript functionality
Created at:
JavaScript jQuery libraries
Demonstrates the templating engine on the browser

Creates the ​#answer​ partial :
  {$define "#content" }

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



{$define "#answer" }
	<div rel="js-answer">
		{$insert $.answer $}
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).

We want to re-render this partial and replace it on the client side:
  // **** about.js  ****

// 2. ++++ create renderAnswer
	function renderAnswer(answer) {
	 // to reference the partial, use /...#answer 
		var html = View.getPartialHTML("/about#answer",{
			answer: answer
		// simple jQuery DOM manipulation

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

	function init(){

	function teardown(){}

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

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.