<!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-rc.3/handlebars.js"></script> <script src="//ryanflorence.com/ember.min.js"></script> <meta charset=utf-8 /> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <title>JS Bin</title> </head> <body> <script type="text/x-handlebars"> <ul class="nav well"> {{#each model}} {{render "user" this}} {{/each}} </ul> </script> <script type="text/x-handlebars" id="user"> <li> <p> <img {{bindAttr src="avatar"}}> <b>{{first}} {{last}}</b> </p> </li> </script> </body> </html>
var App = Ember.Application.create(); App.ApplicationRoute = Ember.Route.extend({ model: function() { return users; } }); var users = [ { id: 1, first: 'Ryan', last: 'Florence', avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg' }, { id: 2, first: 'Tom', last: 'Dale', avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png' }, { id: 3, first: 'Yehuda', last: 'Katz', avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg' } ];
img { width: 50px; margin-right: 10px; }