Question

我正在尝试创建一个简单的应用程序，在索引页面上你有导航栏，只是一个简单的“你好”消息。然后，您可以单击用户或组织，它将分别进行调整。

routes.js

App.Router.map(function() {
  this.resource('index', { path : '/' }, function() {
    this.route('users', { path : '/users'});
    this.route('org', { path : '/org'});
  });
})

App.IndexRoute = Ember.Route.extend({
  renderTemplate : function() {
    this.render('index');
    this.render('nav', {
      outlet : 'nav',
      into   : 'index'
    })
  }
})

App.IndexUsersRoute = Ember.Route.extend({
  model: function() {
    return EmberFire.Array.create({
      ref: new Firebase(FirebaseRef + 'users')
    });
  },
  renderTemplate: function() {
    this.render('index');
    this.render('nav', {
      outlet: 'nav',
      into  : 'index'
    });
    this.render('users', { 
      outlet: 'users',
      into  : 'index'
    });
  }
});

App.IndexOrgRoute = Ember.Route.extend({
  model: function() {
    return EmberFire.Array.create({
      ref: new Firebase(FirebaseRef + 'organizations')
    })
  },
  renderTemplate: function() {
    this.render('index');
    this.render('nav', {
      outlet: 'nav',
      into  : 'index'
    });
    this.render('org', {
      outlet: 'org',
      into  : 'index'
    });
  }
});

并在index.html

<!-- Nav -->
  <script type='text/x-handlebars' data-template-name='nav'>
    <nav>
      ...........
    </nav>
  </script>
  <!-- End Nav -->

  <!-- Index -->
  <script type='text/x-handlebars' data-template-name='index'> 
    {{outlet nav}}

    <section id='userDisplay'>
      <div class="row">
        {{outlet users}}
      </div>
    </section>

    <section id='orgDisplay'>
      <div class="row">
        {{outlet org}}
      </div>
    </section>
  </script> 

  <!-- Users -->
  <script type='text/x-handlebars' data-template-name='users'>
    <section id='registerForm'>  
      <h3>Register A User:</h3>
      .......
    </section>
  </script>

  <!-- Orgs -->
  <script type='text/x-handlebars' data-template-name='org'>
    <section id='registerForm'>  
      <h3>Register An Organization:</h3>
      .......
    </section>
  </script>

目前导航部分在每个路线中都正确呈现，但我从users或orgs模板中得不到任何内容。

我为了正确渲染这些模板而遗漏了什么？

Answer 1

尝试从嵌套路由中删除this.render('index')，将呈现其父index。

http://emberjs.jsbin.com/lebek/1/edit

http://emberjs.jsbin.com/lebek/1#/users

http://emberjs.jsbin.com/lebek/1#/org

Ember.js嵌套路由和模板不起作用

1 个答案: