Question

我正在粉碎杂志上的Ember教程：http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/

然而，当我到达他们的应用程序的路由部分时，我的路由似乎是为了呈现一个＆＃39;用户＆＃39;而是模板直接调用文件：

enter image description here

使用以下app.js文件访问/index.html#/users时：

/ *实例化应用程序并将其设置为记录转换* /

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});
/* assets/js/app/controllers/users.js */

App.UsersController = Em.ArrayController.extend({
    sortProperties: ['name'],
    sortAscending: true, // false == descending

    usersCount : function() {
        return this.get('model.length');
    }.property('@each')

});
/* user.js */   

App.User = DS.Model.extend({
    name                    : DS.attr(),
    title                   : DS.attr(),
    company             : DS.attr(),
    email                   : DS.attr(),
    phoneNumber     : DS.attr(),
    streetAddress : DS.attr(),
    university      : DS.attr(),
    areaOfStudy     : DS.attr(),
    degree              : DS.attr(),
    notes                   : DS.attr(),
    lastUpdated     : DS.attr()
});
/* assets/js/app/router.js */

App.Router.map(function() {
    this.resource('users', function() {
        this.resource('user', { path: '/:user_id' }, function() {
            this.route('edit');
        });
        this.route('create');
    });
});

// each route has this `model` hook where you specify which Model the route needs to load
// http://emberjs.com/guides/routing/specifying-a-routes-model/
App.UsersRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('user');
    }
});
/* store.js */

App.ApplicationAdaptera = DS.FixtureAdapter;

App.User.FIXTURES = [

{
    id          : 1,
    name            : "Dummy data person",
    title           : "something elser",
    company         : "Company 1",
    email           : "somegmail@gmail.com",
    phoneNumber     : "000 000 0000",
    streetAddress           : "middle of no where",
    university      : ["somewhere"],
    areaOfStudy     : ["wow"],
    degree          : ["BS"],
    notes           : "nothing",
    lastUpdated     : "Mon, 26 Aug 2013 22:22:43 GMT"
}   

];

这是通过连接以下文件结构中的文件创建的：

链接：2

template.js文件：

Ember.TEMPLATES["application"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data
/**/) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '', stack1, hashTypes, hashContexts;


  data.buffer.push("\n\n\n<div class=\"main\">\n    \n\n    \n  ");
  hashTypes = {};
  hashContexts = {};
  stack1 = helpers._triageMustache.call(depth0, "outlet", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data});
  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
  data.buffer.push("\n\n</div>");
  return buffer;

});

Ember.TEMPLATES["index"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data
/**/) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '', stack1, stack2, hashTypes, hashContexts, options, self=this, helperMissing=helpers.helperMissing;

function program1(depth0,data) {


  data.buffer.push(" Got to the users page ");
  }

  data.buffer.push("\n\n");
  hashTypes = {};
  hashContexts = {};
  options = {hash:{},inverse:self.noop,fn:self.program(1, program1, data),contexts:[depth0],types:["STRING"],hashContexts:hashContexts,hashTypes:hashTypes,data:data};
  stack2 = ((stack1 = helpers['link-to'] || (depth0 && depth0['link-to'])),stack1 ? stack1.call(depth0, "users", options) : helperMissing.call(depth0, "link-to", "users", options));
  if(stack2 || stack2 === 0) { data.buffer.push(stack2); }
  return buffer;

});

Ember.TEMPLATES["users"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data
/**/) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
  var buffer = '', stack1, hashTypes, hashContexts, self=this;

function program1(depth0,data) {

  var buffer = '', stack1, hashTypes, hashContexts;
  data.buffer.push("\n  <tr>\n      <th>");
  hashTypes = {};
  hashContexts = {};
  stack1 = helpers._triageMustache.call(depth0, "user.name", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data});
  if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
  data.buffer.push("</th>\n </tr>\n");
  return buffer;
  }

function program3(depth0,data) {



      data.buffer.push("\n  <tr>\n      <th>no users...</th>\n  </tr>\n");
      }

      data.buffer.push("\n\n<div>Users: ");
      hashTypes = {};
      hashContexts = {};
      stack1 = helpers._triageMustache.call(depth0, "usersCount", {hash:{},contexts:[depth0],types:["ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data});
      if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
      data.buffer.push("</div>\n<table class=\"table table-bordered table-hover table-condensed\">\n<thead>\n   <td>ID</td>\n   <!--\n  <td>Name</td>\n <td>Title</td>\n    <td>Company</td>\n  <td>Email</td>\n    <td>Phone Number</td>\n <td>Email</td>\n    <td>Street Address</td>\n   <td>University</td>\n   <td>Area of Study</td>\n    <td>Degree</td>\n   <td>Notes</td>\n    <td>Last Updated</td>\n -->\n</thead>\n");
      hashTypes = {};
      hashContexts = {};
      stack1 = helpers.each.call(depth0, "user", "in", "controller", {hash:{},inverse:self.program(3, program3, data),fn:self.program(1, program1, data),contexts:[depth0,depth0,depth0],types:["ID","ID","ID"],hashContexts:hashContexts,hashTypes:hashTypes,data:data});
      if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
      data.buffer.push("\n</table>");
      return buffer;

    });

原始车把模板是：

{{! /assets/js/app/templates/users.hbs }}

<div>Users: {{usersCount}}</div>
<table class="table table-bordered table-hover table-condensed">
<thead>
    <td>ID</td>
    <!--
    <td>Name</td>
    <td>Title</td>
    <td>Company</td>
    <td>Email</td>
    <td>Phone Number</td>
    <td>Email</td>
    <td>Street Address</td>
    <td>University</td>
    <td>Area of Study</td>
    <td>Degree</td>
    <td>Notes</td>
    <td>Last Updated</td>
    -->
</thead>
{{#each user in controller}}
    <tr>
        <th>{{user.name}}</th>
    </tr>
{{else}}
    <tr>
        <th>no users...</th>
    </tr>
{{/each}}
</table>

Index.html文件：

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- metadata -->
    <meta charset="utf-8">
    <title>Data Store</title>
    <meta name="viewport" content="initial-scale=1">

    <!-- stylesheets -->
    <link rel="stylesheet" href ="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="assets/css/style.css">

  </head>
  <body>

    <!-- templates will be filled in here -->

    <!-- javascript files loaded after content -->
    <!-- templates.js, libs.js and app.js are created by a Grunt task -->
    <script src="assets/js/libs.js"></script>
    <script src="assets/js/templates.js"></script>
    <script src="assets/js/app.js"></script>

  </body>
</html>

Ember Inspector输出：

Ember Inspector output

灰烬路线被错误地处理为文件

0 个答案: