Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="VBS App" />
  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<link href="//bootswatch.com/flatly/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="//builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.js"></script>
  <script src="http://builds.erikbryn.com/ember-model/ember-model-latest.js"></script>
​
​
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<html lang="en">
  <script type='text/x-handlebars' data-template-name="application">
    <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
       {{#linkTo "index" classNames="brand"}}App{{/linkTo}}
         <ul class="nav">
           {{#linkTo "students" tagName="li" href=false}}{{#linkTo "students" }}Students{{/linkTo}}{{/linkTo}}
           {{#linkTo "classes" tagName="li" href=false}}{{#linkTo "classes"}}Classes{{/linkTo}}{{/linkTo}}
           {{#linkTo "schedule" tagName="li" href=false}}{{#linkTo "schedule"}}Schedule{{/linkTo}}{{/linkTo}}
        </ul>
     </div>
   </div>
 </div>
 
    <div class='container main'>{{ outlet }}</div>
  </script>
  <script type='text/x-handlebars' data-template-name="students">
    <div class='row'>
      <div class='span12'><h2>Students</h2></div>
    </div>
    <div class='row'>
      <div class='span3'>
      <div class='searchbox'>
        {{input type="text" classNames="span3 search-query" valueBinding="nameFilter" placeholder="Search..."}}
      </div>
        <ul class='nav nav-tabs nav-stacked'>
        {{#each student in filteredContent}}
          <li>
            {{#linkTo 'students.student' student}}{{ student.name }}{{/linkTo}}
          </li>
        {{/each}}
        </ul>
        {{#linkTo 'students.new'}}+ Add Student{{/linkTo}}
      </div>
      <div class='span9'>
        {{ outlet }}
      </div>
    </div>
  </script>
  <script type='text/x-handlebars' data-template-name="students/student">
    <div class='row'>
      <div class='span12'>
        <div class='student-name'>{{name}}</div>
        <div class='student-address'>{{address}}</div>
        {{#linkTo 'classes.class' grade}}{{grade.name}}{{/linkTo}}
      </div>
    </div>
  </script>
  <script type='text/x-handlebars' data-template-name="students/new">
    <div class='row'>
      <div class='span12'>
        <div class='student-name'>Name: {{input type='text' valueBinding='newName'}}</div>
        <div class='student-address'>Address {{input type='text' valueBinding='newAddress'}}</div>
        {{view Ember.Select
          contentBinding='grades'
          valueBinding='newGrade'
          optionLabelPath='content.name'
          optionValuePath='content.id'
          prompt='Select a class'
        }}
        <button class='btn btn-primary' {{action 'save'}}>Save</button>
        
      </div>
    </div>
  </script>
  <script type='text/x-handlebars' data-template-name="classes">
    <div class='row'>
      <div class='span12'><h2>Classes</h2></div>
    </div>
    <div class='row'>
      <div class='span3'>
      <div class='searchbox'>
        {{input type="text" classNames="span3 search-query" valueBinding="nameFilter" placeholder="Search..."}}
      </div>
        <ul class='nav nav-tabs nav-stacked'>
        {{#each}}
          <li>
            {{#linkTo 'classes.class' this}}{{ name }} [{{students.length}}]{{/linkTo}}
          </li>
        {{/each}}
        </ul>
      </div>
      <div class='span9'>
        {{ outlet }}
      </div>
    </div>
  </script>
    <script type='text/x-handlebars' data-template-name="classes/class">
    <div class='row'>
      <div class='span12'>
        <div class='class-name'><h2>{{name}}</h2></div>
        {{#each student in students}}
        <div class='row'>
          <div class="span4">{{#linkTo 'students.student' student}}{{ student.name }}{{/linkTo}}</div>
        </div>
        {{/each}}
      </div>
    </div>
  </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
RyanHirschpro
0viewers