Question

我有一个使用Handlebars模板的简单Ember.js应用程序。我有几个用户路由，如下面的main.js文件中所述：

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


App.UsersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('user');
  }
});
App.UsersController = Ember.ArrayController.extend({
  sortProperties: ['first_name']
});    
App.UserRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('user', params.user_id);
  }
});
App.UserController = Ember.ObjectController.extend({});

为此，我有以下两个模板（在同一个文件中）：

<script type="text/x-handlebars" data-template-name="users">
  <ol class='breadcrumb'>
    <li>{{#link-to 'index'}}Home{{/link-to}}</li>
    <li class='active'>Users</li>
  </ol>

  <ul class='list-unstyled'>
    {{#each}}
      <li>{{#link-to 'user' this class='label label-primary'}}{{first_name}}{{/link-to}}</li>
    {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="user">
  <ol class='breadcrumb'>
    <li>{{#link-to 'index'}}Home{{/link-to}}</li>
    <li class='active'>User: {{first_name}}</li>
  </ol>
  <p>Test</p>
</script>

然而，＆＃34;用户＆＃34;模板没有加载。如果我访问＆＃34; / users / 4＆＃34;它只是加载＆＃34;用户＆＃34;再次模板。知道我做错了什么吗？感谢。

Answer 1

您需要在{{outlet}}模板中添加users，以便知道应如何呈现子路由（在您的情况下为user）。

Answer 2

你有像这样的模板层次结构

application
  -index (generated)
  -users
     -index (generated)
     -user
        -index (generated)
        -edit
     -create

您必须在父模板中告知占位符{{outlet}}，其中子模板将被呈现。

假设我们有两个子模板，并且在给出{{outlet}}的区域中呈现第一个子模板，因此导航到第二个子模板将替换第一个子模板。但是将保留父模板内容，只会更改子模板的区域。

看看它

http://emberjs.com/guides/routing/defining-your-routes/

http://emberjs.com/guides/templates/rendering-with-helpers/

车把模板无法正确渲染Ember.js

2 个答案: