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 charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/release/ember.js"></script>
</head>
<body>
​
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
​
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="index">
    <span>-- index -- </span>
    
    {{show-results results=results}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/show-results">
    <h2>Results:</h2>
    
    <p>Type is: {{results.type}}</p>
    
    <h3>Unsorted:</h3>
    <ul>
      {{#each results.res}}
        <li>{{name}} -- {{age}}</li>      
      {{/each}}
    </ul>
    
    <h3>Sorted:</h3>
    <ul>
      {{#each sorted.arrangedContent}}
        <li>{{name}} -- {{age}}</li>      
      {{/each}}
    </ul>
   
   <button {{action "sortName"}}>Sort by Name</button>
   <button {{action "sortAge"}}>Sort by Age</button>
   
  </script>
​
</body>
</html>
​
 
/* Put your CSS here */
html, body {
  margin: 20px;
}
​
 
App = Ember.Application.create();
​
App.Router.map(function() {
  // put your routes here
});
​
App.IndexRoute = Ember.Route.extend({
  
});
​
​
​
App.IndexController = Ember.Controller.extend({
  results: {
    type: 'people',
    res : [
      {name: 'charlie', age: '55'},
      {name: 'bobby', age: '19'},
      {name: 'raymond', age: '39'}
    ]
  }
});
​
App.ShowResultsComponent = Ember.Component.extend({
​
  // not sure how to set up array controller
  sorted : function(){
    return Ember.ArrayController.create({
     content : this.get('results.res')
  });
    
  }.property(),
  
  actions: {
    sortAge: function(){
      this.get("sorted").set("sortProperties",["age"]);
      this.get("sorted").toggleProperty("sortAscending");
    },
    sortName: function(){
      this.get("sorted").set("sortProperties",["name"]);
      this.get("sorted").toggleProperty("sortAscending");
    }
  }
​
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers