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="Minimalist Ember JSBin" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<title>Ember JS Example</title>
</head>
<body>
  
  <script type="text/x-handlebars">
    <div class="container">
      <h1>Ember JS Example</h1>
      <ul>
        <li>{{#linkTo 'welcome'}}View Welcome Page{{/linkTo}}</li>
        <li>{{#linkTo 'other'}}View Other Page{{/linkTo}}</li>
        <li>{{#linkTo 'students.index'}}Students{{/linkTo}}</li>       
      </ul>  
<div class="alert alert-info">
  <h4>Global Navigation Pulldown</h4> 
      {{view App.NavSelectView
             viewName="select_requirement"
             contentBinding="studModel"
             optionLabelPath="content.name"
             optionValuePath="content.id"
             prompt="Pick a student:"
      }}      
</div>
      
      {{outlet}}  
    </div>
  </script>
​
  <script type="text/x-handlebars" data-template-name="welcome">
      <h2>Welcome Page</h2>
      <a href="#" class="btn btn-primary" {{action doit}}>Do Something</a>
      {{ outlet }}
  </script>
​
  <script type="text/x-handlebars" data-template-name="other">
      <h2>Other Page</h2>
      {{ outlet }}
  </script>
​
  <script type="text/x-handlebars" data-template-name="students">
    {{ outlet }}
  </script>    
​
  <script type="text/x-handlebars" data-template-name="students/index">
​
<div class="alert alert-success">
  <h4>Local Navigation Pulldown</h4>      
      {{view App.NavSelectView
             viewName="select_requirement"
             contentBinding="controller"
             optionLabelPath="content.name"
             optionValuePath="content.id"
             prompt="Pick a student:"
      }}    
</div>
​
​
​
​
​
      <h2> All Students </h2>
      <table class="table table-striped table-hover">
      <thead>
      <tr>
      <th><h4>Name:</h4></th>
      <th><h4>Grade:</h4></th>
      <th><h4>GPA:</h4></th>
      </tr>
      </thead>
​
​
      <tbody>
      {{#each}}
        <tr>
        <td><h4>{{#linkTo "student.index" this}} {{name}} {{/linkTo}}</h4></td>
        <td>{{grade}}</td>
        <td>{{gpa}}</td>
        </tr>
      {{/each}}
​
      </tbody>
      </table>
​
  </script>  
  
  <script type="text/x-handlebars" data-template-name="student">
    <h2>Student</h2>
    <h3>{{name}}</h3>
    <h4>{{grade}}</h4>
    <h4>{{gpa}}</h4>
  </script>   
  
</body>
</html>
 
App = Ember.Application.create();
​
​
// Router
App.Router.map(function() {
  this.resource('welcome', { path: '/' }); // Welcome route
  this.resource('other', { path: 'other' }); // Other route
  this.resource("students", function(){
    this.resource("student", { path: ":student_id" }, function(){});
  });  
});
​
App.ApplicationRoute = Ember.Route.extend({
  events: {
    doit: function() {
     App.doSomething();
    }
  }
});
​
App.ApplicationController = Ember.ObjectController.extend({
  
  studModel: function(){
   return App.Student.find(); 
  }.property(),
  
        selectStudent: function(studentId){
            this.transitionToRoute('student', studentId);
        }
    
});
​
​
App.StudentsIndexRoute = Em.Route.extend({
    model: function() {
        return App.Student.find();
    },
    events: {
        selectStudent: function(studentId){
            this.transitionTo('student', studentId);
        }
    }  
});
​
App.StudentRoute = Em.Route.extend({
    model: function(params) {
        return App.Student.find(params.student_id);
    }
});
​
App.StudentsIndexController = Ember.ArrayController.extend({
                                           
});
​
​
// Custom Views
App.NavSelectView = Ember.Select.extend({
    valueDidChange: Ember.observer(function() {
        this._super();
//         alert("select value: " + this.get('value'));
        this.get('controller').send('selectStudent', this.get('value'));
    }, 'value')
});
​
// Generic function to try stuff
​
App.doSomething = function(){
  alert("try it...");   
};
​
// Models
​
App.Store = DS.Store.extend({
  adapter: 'DS.FixtureAdapter'
});
​
App.Student = DS.Model.extend({
    name: DS.attr('string'),
    grade: DS.attr('string'),
    gpa: DS.attr('number')  
});
​
// Fixture Data
App.Student.FIXTURES = [{
        id: 1,
        name: "John",
        grade: "9",
        gpa: 3.2
    },
    {
        id: 2,
        name: "Mary",
        grade: "12",
        gpa: 3.9
​
    },
    {
        id: 3,
        name: "Jane",
        grade: "10",
        gpa: 3.6
​
    },
    {
        id: 4,
        name: "Frank",
        grade: "11",
        gpa: 2.9
​
    },
    {
        id: 5,
        name: "Bill",
        grade: "10",
        gpa: 2.1
​
    },
    {
        id: 6,
        name: "James",
        grade: "12",
        gpa: 3.9
​
    }                        
                        
];
Output

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

Dismiss x
public
Bin info
GordonPotterpro
0viewers