mustache.coffee

templateText  = """<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
       <a class="brand" href="home" id="home">Pouch Demo</a>
           <div class="nav-collapse collapse">
       <ul class="nav">
            
               <li id="noteLink" {{#newNote}}class='active'{{/newNote}}><a id="newNote" href="newNote">New</a></li>
            </ul>
      
            <ul class="nav pull-right" >

 
            <li><a href="start" id="toggleStart"><i class="icon-refresh"></i></a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
  
 
<br/><br/><br/><div class="container-fluid">
  	<div class="row-fluid">
  	<div class="span2">
          <div class="well sidebar-nav" id="sidebar">
            <ul class="nav nav-list" id="sideList"><li class='nav-header'>Notes</li>
          {{#sideList}}
          <li id='li{{key}}' {{#active}}class='active'{{/active}}><a href='#{'#'}{{key}}' id='{{key}}'>{{{title}}}</a></li>
          {{/sideList}}
            </ul>
          </div><!--/.well -->
        </div>
    	<div class="span10">
      <div  id="mainContent">{{^edit}}{{> content}}{{/edit}}{{#edit}}{{> editContent}}{{/edit}}</div>
    	</div>
  	</div>
	</div>"""
template = Mustache.compile templateText
Mustache.compilePartial("content","""
<h1>{{title}}{{#editable}}<a id='editable' href='edit{{hash}}'><i class ='icon-edit' id='edit{{hash}}'></i></a>{{/editable}}</h1>
<p>{{#md}}{{{body}}}{{/md}}</p>
""")
Mustache.compilePartial("editContent","""
<form class="form" id="updateForm">
	<div class="tabbable tabs-left">
		<ul class="nav nav-tabs">
			<li  class="active"><a href="#tab1" data-toggle="tab">edit</a></li>
			<li><a href="#tab2" data-toggle="tab">view</a></li>
		</ul>
		<div class="tab-content">
		<div class="tab-pane active" id="tab1">	
	  	<div class="control-group">
    		<label class="control-label" for="noteTitle">Title</label>
    		<div class="controls">
      
 <input type="text" id="noteTitle" name="title" value='{{title}}'>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="nodeBody">Your Note</label>
    <div class="controls">
      <textarea rows="10" id="noteBody" class="span8" name='body'>{{{body}}}</textarea></div>
  </div>
  
  
  
     </div><div class="tab-pane" id="tab2"></div>
       </div>
</div>
  
  
  
  <div class="control-group">
    <div class="controls" id="btg">
      <button type="submit" class="btn btn-success" id="updateNote">Update</button>
      <button type="submit" class="btn btn-info" id="cancelUpdate">Cancel Edit</buton>
      <button type="submit" class="btn btn-danger" id="deleteNote">Delete</button>
    </div>
  </div>
</form>
   
    """)