![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 /* 2 * application 3 * */ 4 window.Trot = Ember.Application.create(); 5 6 /* 7 * router 8 */ 9 Trot.Router.map(function() { 10 this.resource('index', { 11 path : '/' 12 }); 13 this.resource('list', { 14 path : '/list' 15 }); 16 this.resource('content', { 17 path : '/person/:person_id' 18 }); 19 }); 20 Trot.ListRoute = Ember.Route.extend({ 21 model : function() { 22 return Trot.Person.find(); 23 }, 24 setupController : function(controller, model) { 25 controller.set('list', model); 26 } 27 }); 28 29 /* 30 * store 31 */ 32 Trot.Store = DS.Store.extend({ 33 revision : 12, 34 adapter : 'DS.FixtureAdapter' 35 }); 36 37 /* 38 * model 39 */ 40 Trot.Person = DS.Model.extend({ 41 firstName : DS.attr('string'), 42 lastName : DS.attr('string'), 43 fullName : function() { 44 return this.get('firstName') + ' ' + this.get('lastName'); 45 }.property('firstName', 'lastName') 46 }); 47 Trot.Person.FIXTURES = [ { 48 id : 1, 49 firstName : 'Emily', 50 lastName : 'Zhang' 51 }, { 52 id : 2, 53 firstName : 'Wendy', 54 lastName : 'Wang' 55 }, { 56 id : 3, 57 firstName : 'Joy', 58 lastName : 'Li' 59 } ];
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <script type="text/x-handlebars" data-template-name="index"> 9 <h1>Home page</h1> 10 {{#linkTo list}}List{{/linkTo}} 11 </script> 12 13 <script type="text/x-handlebars" data-template-name="list"> 14 <h1>List</h1> 15 <ul> 16 {{#each person in list}} 17 <li>{{person.fullName}} {{#linkTo content person}}View{{/linkTo}} 18 </li> {{/each}} 19 </ul> 20 {{#linkTo index}}BACK{{/linkTo}} 21 </script> 22 23 <script type="text/x-handlebars" data-template-name="content"> 24 <h1>Content</h1> 25 26 <h3>FullName:{{fullName}}</h3> 27 <p>FirstName: {{firstName}}</p> 28 <p>LastName:{{lastName}}</p> 29 30 {{#linkTo list}}BACK{{/linkTo}} 31 </script> 32 33 <script src="js/libs/jquery.min.js"></script> 34 <script src="js/libs/handlebars.js"></script> 35 <script src="js/libs/ember.js"></script> 36 <script src="js/libs/ember-data.js"></script> 37 38 <script src="js/app.js"></script> 39 </body> 40 </html>