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>
    <title>Ember Tests</title>
  </head> 
  <body>
​
    <script type="text/x-handlebars">
    <h1>Hello World</h1>
    <p>{{#link-to 'users'}}Users{{/link-to}}</p>
    {{outlet}}
    </script>
    
    <script type="text/x-handlebars" id="users">
    <h2>Users</h2>
    <p>{{#link-to 'add'}}Add User{{/link-to}}</p>
    {{#each}}
      {{#link-to 'user' this}}{{name}}{{/link-to}}<br />
    {{/each}}
    {{outlet}}
    </script>
    
    <script type="text/x-handlebars" id="user">
    <h3>User</h3>
    <p>{{name}}</p>
    </script>
    
    <script type="text/x-handlebars" id="users/add">
      <h3>Add User</h3>
    </script>
 
  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
    <script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>  
  </body>
</html>
 
App = Ember.Application.create();
​
App.Router.map(function(){
  this.resource('users', function(){
    this.resource('user', { path: ':user_id' });
    this.resource('add');
  });
});
​
App.UsersRoute = Ember.Route.extend({
  model: function(){
    console.log("Users route triggered");
    return App.Users; 
  }
});
​
App.UserRoute = Ember.Route.extend({
  model: function(params){
   return App.Users.findBy('id', params.user_id);
  }
});
​
App.UserAddRoute = App.UserRoute.extend({
  renderTemplate: function(){
    console.log("triggered");
    this.render('users/add'); 
  }
});
​
App.Users = [
  Ember.Object.create({
    id: '1',
    name: 'Elvis'
  }),
  Ember.Object.create({
    id: '2',
    name: 'John'
  })
];
​
Output

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

Dismiss x
public
Bin info
micahblupro
0viewers