Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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="search-query" valueBinding="nameFilter" placeholder="Search..."}}
      </div>
        <h3>Filtered</h3>
        <ul class='nav nav-tabs nav-stacked'>
        {{#each student in filteredContent}}
          <li>
            {{#linkTo 'students.student' student}}{{ student.name }}{{/linkTo}}
          </li>
        {{/each}}
        </ul>
        <h3>All</h3>
        <ul class='nav nav-tabs nav-stacked'>
        {{#each student in controller}}
          <li>
            {{#linkTo 'students.student' student}}{{ student.name }}{{/linkTo}}
          </li>
        {{/each}}
        </ul>
      </div>
      <div class='span9'>
        {{ outlet }}
      </div>
    </div>
  </script>
  <script type='text/x-handlebars' data-template-name="students/student">
    <div class='row'>
      <div class='student-name'>{{name}}</div>
      <div class='student-address'>{{address}}</div>
    </div>
  </script>
</body>
</html>
 
.main {
  padding-top:60px;
}
.searchbox {
  padding-bottom: 5px;
}
 
var App = Ember.Application.create();
App.Router.map(function() {
  this.resource('students', function() {
    this.route('student', { path: ':student_id' });
  });
  
  this.route("schedule");
  this.route("classes");
  
});
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('students');
  }
});
App.StudentsRoute = Ember.Route.extend({
  model: function() {
    return App.Student.find();
  }
});
App.StudentsController = Ember.ArrayController.extend({
  sortProperties: ['name'],
  nameFilter: null,
  filteredContent: function(){
    if(!this.get('nameFilter')) return this.get('content');
    
    var nameRegEx = new RegExp(this.get('nameFilter'), 'i');
    return this.filter(function(item) {
      return item.get('name').search(nameRegEx) !== -1;
    });
  }.property('nameFilter', '@each.name')
});
App.Student = Ember.Model.extend({
  name:     Ember.attr(),
  address:  Ember.attr(),
  grade:    Ember.attr()
});
App.Student.adapter = Ember.FixtureAdapter.create();
App.Student.FIXTURES = [
  {
    id: 1,
    name: 'Ryan',
    address: '123 Sunshine Lane'
  },
  {
    id: 2, 
    name: 'Bob',
    address: '345 Shady Crossing'
  },
  {
    id: 3,
    name: 'Rita',
    address: '503 South Main'
  }
];
Output

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

Dismiss x
public
Bin info
RyanHirschpro
0viewers