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="Ember sorting HasMany" />
<meta charset=utf-8 />
<title>Ember Sorting hasMany</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/release/ember.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>Ember Sorting hasMany</h1>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="index">
    <h2>Categories:</h2>
    <ul>
      {{#each model}}
        <li><strong>{{title}}</strong>
          {{#each sortedItems}}
            <div>{{desc}}</div>
          {{/each}}
          <br>
        </li>
      {{/each}}
    </ul>
  </script>
</body>
</html>
 
// Setup
App = Ember.Application.create({});
App.ApplicationAdapter = DS.FixtureAdapter;
​
// Models
// - Category
​
App.Category = DS.Model.extend({
    title: DS.attr("string"),
    createdAt: DS.attr('date', { defaultValue: new Date() }),
    items: DS.hasMany('item', { async: true }),
  sortedItems: Em.computed.sort('items', function(item1, item2){    
             return item1.get('desc').localeCompare(item2.get('desc'));
  })
});
​
// - Items
App.Item = DS.Model.extend({
    desc: DS.attr("string"),
    qty: DS.attr("number", { defaultValue: 0 }),
    price: DS.attr("string", { defaultValue: 0 })
});
​
// FIXTURES
​
App.Category.FIXTURES = [
    {
        id: 1,
        title: "Apples",
        createdAt: new Date(),
        items: [1,2,6]
    },
    {
        id: 2,
        title: "Oranges",
        createdAt: new Date(),
        items: [3,4,5]
    }
];
​
App.Item.FIXTURES = [
  { id: 1, desc:'Gala', qty: 2, price: "45" },
  { id: 2, desc:'Akain', qty: 5, price: "75" },
  { id: 3, desc:'Malta', qty: 2, price: "250" },
  { id: 4, desc:'Pera', qty: 5, price: "200" },
  { id: 5, desc:'Queen', qty: 5, price: "200" },
  { id: 6, desc:'Honeycrisp', qty: 5, price: "200" },
];
​
// Routes
​
App.IndexRoute = Ember.Route.extend({
  model: function(){
  return this.store.find('category');
  }
});
​
​
Output

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

Dismiss x
public
Bin info
kingpin2kpro
0viewers