Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
   <script type="text/x-handlebars">
     <h1> welcome</h1>
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name='index'>
  
    <div class="container">
        <ul>
        <b> I was loaded by IndexRoute</b><br>
        {{#each page in  model}}
            {{page.navbar}}<br>
        {{/each}}
        </ul>
        <b>failing to display using needs api </b>
        <div>
         {{#each page in fetchPages}}
            {{page.navbar}}
         {{/each}}
   </div><!-- /.container -->
  </script> 
  
    
  <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/beta/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
 
window.App = Ember.Application.create({});
App.ApplicationAdapter = DS.FixtureAdapter;
App.Router.map(function(){ 
  this.resource('pages');
});
App.PagesRoute = Ember.Route.extend({ 
  model: function(){
    return this.store.find('page');
  }
});
App.IndexRoute = Em.Route.extend({
  model: function(){
   return this.store.find('page');
  }
});
App.PagesController = Ember.ArrayController.extend();
App.IndexController = Ember.ArrayController.extend({
  needs: 'pages',
  
  fetchPages: Em.computed.alias("controllers.pages.content")  
});  
App.Page = DS.Model.extend({
  name: DS.attr('string'),
  title: DS.attr('string'),
  body:  DS.attr('string'),
  navbar: DS.attr('string'),
  
  parent: DS.belongsTo('page', {inverse: 'subpages', embedded: true, async: true}),
  
  subPages: DS.hasMany('page', {inverse: 'parent', embedded: true, async: true})
});
App.Page.FIXTURES = [
  
  {
    id:  1,
    name: 'about',
    title: 'our thesis',
    body: 'great body',
    navbar: 'about',
    parent: null,
    subPages: [2 ]
    
  },
  
  {
    id:  2,
    name: 'contact',
    title: 'contact page',
    body: 'send an email',
    navbar: 'contact',
    parent: 1,
    subPages: [ ]
    
  }
  
];
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers