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 controllers.categories}}
        <li><strong>{{title}}</strong>
          {{#each items}}
            <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 })
});
​
// - 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({
  
  // Set content for categories after model
  afterModel: function(model) {
    var categoriesPromise;
    categoriesPromise = this.store.find("category");
    this.controllerFor("categories").set("model", categoriesPromise);
    
  }
});
​
// Controllers
App.IndexController = Ember.ObjectController.extend({
  needs: ["categories"]
});
​
App.CategoriesController = Ember.ArrayController.extend({
  sortProperties: ["title"],
  sortAscending: true
});
​
App.ItemsController = Ember.ArrayController.extend({
  sortProperties: ["desc"],
  sortAscending: true
});
​
App.CategoryController = Ember.ObjectController.extend({
  items: (function() {
    return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
      sortProperties: ['desc'],
      content: this.get('content.items')
    });
  }).property('content.items')
});
​
​
Output 300px

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

Dismiss x
public
Bin info
gabrieltomescupro
0viewers