第一个emberjs例子

 

 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 } ];
app.js
 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>
index.html

 

posted @ 2013-07-02 15:18  二分之一黑与白  阅读(569)  评论(1)    收藏  举报