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>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
  <script src="http://builds.emberjs.com/canary/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-canary jsbin</h1>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="users">
    <ul>
      {{#each}}
        <li>
          {{name}}
          <ul>
            {{#each projects}}
            <li>{{name}}</li>
          {{/each}}  
          </ul>
        </li>
      {{/each}}
  
    </ul>
    <button {{action 'save' model}}>Add New User With Projects</button>
  </script>
  
</body>
</html>
 
App = Ember.Application.create({});
​
App.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter
});
​
App.User = DS.Model.extend({
  name: DS.attr('string'),
  projects: DS.hasMany('project', { async: true})
});
​
App.Project = DS.Model.extend({
  name: DS.attr('string')
});
​
App.User.FIXTURES = [
  { id: 1, name: 'Kris', projects: [1,2] },
  { id: 2, name: 'Luke', projects: [1,2] }
];
​
App.Project.FIXTURES = [
  { id: 1, name: 'Ember' },
  { id: 2, name: 'Angular' }
];
​
App.Router.map(function(){
  this.resource('users');
});
​
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('users');
  }
});
​
App.UsersRoute = Ember.Route.extend({
  model: function(){ 
    return this.store.find('user');
  }
});
​
App.UsersController = Ember.ArrayController.extend({
  actions: {
    save: function(model) {
      var controller = this;
      this.store.find('project').then(function(projects) {
        var user = controller.store.createRecord('user', {
          name: 'Joe',
          projects: projects
        });
        user.save();
      });
    }
  },
});
Output

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

Dismiss x
public
Bin info
NateReddingpro
0viewers