如何在Ember.js中创建一个子页面？

Question

I have a website with one template:

<script type="text/x-handlebars">
mainsite 
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="mainpage"> 
    mainpage
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="subpage"> 
    subpage
</script>

{{#linkTo 'mainpage.subpage'}}{{/linkTo}}

So what i want to acomplish is that person types address /mainpage it will see "mainsite mainpage" and when he types /mainpage/subpage he sees the "mainsite mainpage subpage".

So basically i would like to have a subpage put into mainpage template and this combained into the main template (that is first on the list above).

I've tried:

this.resource('mainpage', function() {
    this.route('subpage', { path: '/subpage' });
  });

But than if i click the link created by linkTo address is set to mainpage/subpage (so this is ok), but i see "mainsite mainpage" but dont see "mainsite mainpage subpage".

What i'm doing wrong? How to fix it?

Answer 1

I've just written a tutorial about routing and rendering views that answers this question: http://matthewlehner.net/ember-js-routing-and-views/

However, to be more specific this question, the issue here is defining route vs. resource . There are two options to fix your problem quickly:

Change the route type

this.resource('mainpage', function() {
  this.resource('subpage', { path: '/subpage' });
});

Change the template name

data-template-name="mainpage/subpage"

This is happening because adding a 'subpage' route to a resource adds another action to this resource. In your original case, it will look for a data-template-name="mainpage/subpage" .

Think of the difference between these two routes 'users/new' and 'users/1/comments' - the first should just render a new action for users, but the second is a nested resource that you'd assume would show the comments from a specific user. Using Ember, you'd make these two different routes as follows:

this.resource('users', function () {
  this.route('new'); #renders the 'users/new' template
  this.resource('comments'); #renders the 'comments' template
});

As an added bonus, the route names should just work. At least as of 1.0rc6 they do.