@larissa
To create a subpage in Ember.js, you can follow these steps:
- Define a new route for the subpage in the router.js file. For example, if you want to create a subpage for a blog post, you can define a new route like this:
1
|
this.route('blog-post', {path: '/blog/:post_id'});
|
- Create a corresponding template file for the subpage. In this case, you would create a blog-post.hbs file in the templates directory.
- In the subpage template file, you can access the model data for the specific blog post using the model property. For example, if you have a post model defined in your Ember Data store, you can display the post title and content like this:
1
2
|
<h2>{{model.title}}</h2>
<p>{{model.content}}</p>
|
- If you need to fetch data for the subpage from an API or a store, you can define a corresponding model hook in the route file for the subpage. For example:
1
2
3
|
model(params) {
return this.store.findRecord('post', params.post_id);
}
|
- Finally, you can navigate to the subpage by creating a link to the subpage route in your main template file. For example, if you have a list of blog posts in your main template, you can create a link to the subpage like this:
1
2
3
|
{{#each model as |post|}}
<a href={{route "blog-post" post.id}}>{{post.title}}</a>
{{/each}}
|
By following these steps, you can create a subpage in Ember.js that displays specific content based on the route parameters or model data.