breezhang/add namespace.html

## add namespace.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Looking At Underscore.js Templates</title>
</head>
<body>

    <h1>
        Looking At Underscore.js Templates
    </h1>


    <!-- BEGIN: Underscore Template Definition. -->
    <script type="text/template" class="template">

        <h2>
            <%- rc.listTitle %>
        </h2>

        <ul>
            <% _.each( rc.listItems, function( listItem ){ %>

                <li>

                    <%- listItem.name %>

                    <% if ( listItem.hasOlympicGold ){ %>
                        <em>*</em>
                    <% } %>

                </li>

            <% }); %>
        </ul>


        <% var showFootnote = _.any(
            _.pluck( rc.listItems, "hasOlympicGold" )
        ); %>


        <% if ( showFootnote ){ %>

            <p style="font-size: 12px ;">

                <em>* Olympic gold medalist</em>

            </p>

        <% } %>

    </script>
    <!-- END: Underscore Template Definition. -->


    <!-- Include and run scripts. -->
    <script type="text/javascript" src="../jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../underscore.js"></script>
    <script type="text/javascript">


        // When rending an underscore template, we want top-level
        // variables to be referenced as part of an object. For
        // technical reasons (scope-chain search), this speeds up
        // rendering; however, more importantly, this also allows our
        // templates to look / feel more like our server-side
        // templates that use the rc (Request Context / Colletion) in
        // order to render their markup.
        _.templateSettings.variable = "rc";

        // Grab the HTML out of our template tag and pre-compile it.
        var template = _.template(
            $( "script.template" ).html()
        );

        // Define our render data (to be put into the "rc" variable).
        var templateData = {
            listTitle: "Olympic Volleyball Players",
            listItems: [
                {
                    name: "Misty May-Treanor",
                    hasOlympicGold: true
                },
                {
                    name: "Kerri Walsh Jennings",
                    hasOlympicGold: true
                },
                {
                    name: "Jennifer Kessy",
                    hasOlympicGold: false
                },
                {
                    name: "April Ross",
                    hasOlympicGold: false
                }
            ]
        };

        // Render the underscore template and inject it after the H1
        // in our current DOM.
        $( "h1" ).after(
            template( templateData )
        );


    </script>
</body>
</html>

## basic.html
<!DOCTYPE html>
<html>
<title></title>
<script  src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js" type="text/javascript">
</script>
<script >
    require.config({
        paths : {
            domReady:'//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady',
            backbone : '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
            underscore : '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
            jquery : '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min',
            marionette : '//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.0/backbone.marionette.min'
        },
        shim : {
            jquery : {
                exports : 'jQuery'
            },
            underscore : {
                exports : '_'
            },
            backbone : {
                deps : ['jquery', 'underscore'],
                exports : 'Backbone'
            },
            marionette : {
                deps : ['jquery', 'underscore', 'backbone'],
                exports : 'Marionette'
            }
        }
    });
</script>
</head>
<body>

<script id="id3000" type="text/plain">
    <span><%= name %></span>
    <span><%= age %></span>
</script>

<script id="id4000" type="text/plain">
    <%  console.log(msg); %>
</script>

<script id="id5000" type="text/plain">
   <p> <%-  msg  %> </p>
</script>

<script>
    require(['backbone','domReady'],function(Backbone,domReady){
        domReady(function(){
          console.log(_.template($("#id3000").html())({name:"google",age:300}));
            _.template($("#id4000").html())({msg:"helloworld!"});
           $('body').after( _.template($("#id5000").html())({msg:"helloworld!"}));
        });
    });
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Looking At Underscore.js Templates</title>
	</head>
	<body>

	<h1>
	Looking At Underscore.js Templates
	</h1>


	<!-- BEGIN: Underscore Template Definition. -->
	<script type="text/template" class="template">

	<h2>
	<%- rc.listTitle %>
	</h2>

	<ul>
	<% _.each( rc.listItems, function( listItem ){ %>

	<li>

	<%- listItem.name %>

	<% if ( listItem.hasOlympicGold ){ %>
	<em>*</em>
	<% } %>

	</li>

	<% }); %>
	</ul>


	<% var showFootnote = _.any(
	_.pluck( rc.listItems, "hasOlympicGold" )
	); %>


	<% if ( showFootnote ){ %>

	<p style="font-size: 12px ;">

	<em>* Olympic gold medalist</em>

	</p>

	<% } %>

	</script>
	<!-- END: Underscore Template Definition. -->


	<!-- Include and run scripts. -->
	<script type="text/javascript" src="../jquery-1.8.0.js"></script>
	<script type="text/javascript" src="../underscore.js"></script>
	<script type="text/javascript">


	// When rending an underscore template, we want top-level
	// variables to be referenced as part of an object. For
	// technical reasons (scope-chain search), this speeds up
	// rendering; however, more importantly, this also allows our
	// templates to look / feel more like our server-side
	// templates that use the rc (Request Context / Colletion) in
	// order to render their markup.
	_.templateSettings.variable = "rc";

	// Grab the HTML out of our template tag and pre-compile it.
	var template = _.template(
	$( "script.template" ).html()
	);

	// Define our render data (to be put into the "rc" variable).
	var templateData = {
	listTitle: "Olympic Volleyball Players",
	listItems: [
	{
	name: "Misty May-Treanor",
	hasOlympicGold: true
	},
	{
	name: "Kerri Walsh Jennings",
	hasOlympicGold: true
	},
	{
	name: "Jennifer Kessy",
	hasOlympicGold: false
	},
	{
	name: "April Ross",
	hasOlympicGold: false
	}
	]
	};

	// Render the underscore template and inject it after the H1
	// in our current DOM.
	$( "h1" ).after(
	template( templateData )
	);


	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<title></title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js" type="text/javascript">
	</script>
	<script >
	require.config({
	paths : {
	domReady:'//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady',
	backbone : '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
	underscore : '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
	jquery : '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min',
	marionette : '//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.0/backbone.marionette.min'
	},
	shim : {
	jquery : {
	exports : 'jQuery'
	},
	underscore : {
	exports : '_'
	},
	backbone : {
	deps : ['jquery', 'underscore'],
	exports : 'Backbone'
	},
	marionette : {
	deps : ['jquery', 'underscore', 'backbone'],
	exports : 'Marionette'
	}
	}
	});
	</script>
	</head>
	<body>

	<script id="id3000" type="text/plain">
	<span><%= name %></span>
	<span><%= age %></span>
	</script>

	<script id="id4000" type="text/plain">
	<% console.log(msg); %>
	</script>

	<script id="id5000" type="text/plain">
	<p> <%- msg %> </p>
	</script>

	<script>
	require(['backbone','domReady'],function(Backbone,domReady){
	domReady(function(){
	console.log(_.template($("#id3000").html())({name:"google",age:300}));
	_.template($("#id4000").html())({msg:"helloworld!"});
	$('body').after( _.template($("#id5000").html())({msg:"helloworld!"}));
	});
	});
	</script>
	</body>
	</html>