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>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
  <script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>Header</h1>
    {{#each controller}}
      {{fullName}}:
      {{#each events}}
        {{#link-to 'event' this}}{{name}}{{/link-to}}
      {{/each}}
      <br />
    {{/each}}
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="event">
    <h1>{{name}}</h1>
    {{view Ember.Select
        contentBinding="controllers.application.model"
        optionValuePath="content.id"
        optionLabelPath="content.fullName"
        selectionBinding="selectedPerson"}}
     <p>Event belongs to {{person.fullName}}</p>
  </script>
</body>
</html>
 
App = Ember.Application.create();
​
// router and routes
App.Router.map(function() {
    this.resource('event', {path: '/event/:event_id'});
});
​
App.EventRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('event', params.event_id);
  }
});
​
App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('person');
  }
});
// controllers
App.EventController = Ember.ObjectController.extend({
  needs: ['application'],
  selectedPersonChanged: function() {
    debugger;
    if(this.get('selectedPerson')) {
      this.get('selectedPerson.events').pushObject(this.get('content'));
    }
  }.observes('selectedPerson')
});
​
// store
App.Store = DS.Store.extend({
  adapter: DS.FixtureAdapter
});
​
// models
App.Person = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    events: DS.hasMany('event', { async: true }),
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
});
​
App.Event = DS.Model.extend({
    name: DS.attr('string'),
    person: DS.belongsTo('person')
});
​
// fixture data
​
App.Person.FIXTURES = [
  {id: 1, firstName: 'Some', lastName: 'One', events: [10, 11]},
  {id: 2, firstName: 'Some', lastName: 'Oneelse', events: []}
];
​
App.Event.FIXTURES = [
  {id: 10, name: 'event 1', person: 1},
  {id: 11, name: 'event 2', person: 1}
];
​
Output

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

Dismiss x
public
Bin info
denispeplinpro
0viewers