1
我想做一個簡單的應用程序,在索引頁上你有你的導航欄,只是一個簡單的「你好」的消息。然後您可以點擊用戶或組織,它將分別進行調整。Ember.js嵌套的路線和模板不工作
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
模板一無所獲。
我爲了正確呈現這些模板而遺漏了什麼?
真棒。謝謝! – JDillon522