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 parent/child playlist/song" />
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
  <script src="http://builds.emberjs.com/ember-data-latest.js"></script>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>{{#link-to 'index'}}Playlists Demo{{/link-to}}</h1>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="index">
    <h2>Playlists:</h2>
    <ul>
      {{#each}}
        <li>{{#link-to 'playlist' this}}{{name}}{{/link-to}}</li>
      {{/each}}
    </ul>
  </script>
  <script type="text/x-handlebars" data-template-name="playlist">
    <h3>{{content.name}}</h3>
    {{render 'songs'}}
    {{#link-to 'index'}}&lt;-- Back{{/link-to}}
  </script>
  <script type="text/x-handlebars" data-template-name="songs">
    <ul>
      {{#each song in controller}}
      <li>{{song.name}}</li>
      {{/each}}
    </ul>
  </script>
</body>
</html>
 
App = Ember.Application.create({});
​
App.ApplicationAdapter = DS.FixtureAdapter.extend({});
​
App.Router.map(function() {
  this.resource('playlist',{path : ':playlist_id'});
});
​
App.Playlist = DS.Model.extend({
  name : DS.attr('string'),
  songs : DS.hasMany('song',{async:true})
});
​
App.Song = DS.Model.extend({
  name : DS.attr('string')
});
​
App.Playlist.FIXTURES = [
  {id:1, name : "oh yeah", songs : [1,2]},
  {id:2, name : "wat", songs : [3,4]},
  {id:3, name : "all of it!", songs : [1,2,3,4]}
];
​
App.Song.FIXTURES = [
  {id:1, name : "Best song EVAR!"},
  {id:2, name : "No way! I am best!"},
  {id:3, name : "Poor sucky song."},
  {id:4, name : "Wooooorst! Song in the world."}
];
​
​
App.IndexRoute = Ember.Route.extend({
  model: function(){
      return this.store.find('playlist');
  }
});
​
App.PlaylistRoute = Ember.Route.extend({
  setupController : function(controller,model){
    this._super(controller,model);
    this.controllerFor('songs').set('content',model.get('songs'));
  }
});
​
App.PlaylistController = Ember.ObjectController.extend({
  needs : ['songs']
});
​
App.SongsController = Ember.ArrayController.extend({
  sortProperties : ['name'],
  sortAscending : true
});
​
​
Output

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

Dismiss x
public
Bin info
jagthedrummerpro
0viewers