I will start by posting my router, As I think it makes it easier to explain:
#resource 'clients', path: 'clients', ->
#resource 'client', path: '/:client_id', ->
#resource 'client.contact', path: ':client_id/contact', ->
#route 'new', path: '/new'
#route 'edit'
What I am after is, Being able to add a new contact for a selected client, Without loosing/replacing the selected client template!
In other words, I want the client/contact/new.hbs to be nested inside the client/index.hbs without replacing it:
`templates/client/index.hbs`
{{!-- Some code has been removed/shortened for clarity --}}
{{model.name}}
{{model.phone}}
{{model.url}}
<button class="btn btn-danger" {{action 'delete'}}>Delete</button>
<h3>Contacts</h3>
{{#link-to 'client.contact.new'}}contactsLink{{/link-to}}
{{!-- here where i want 'contacts.new' to show up without replacing this template--}}
{{outlet}}
Using the current route (above), I achieved that, But, The URL looks really Ugly (I shortened the client-id for clarity):
/clients/6654../6654../contact/new
The client id is shown twice in the URL, And if I removed the dynamic segment from the nested client.contact resource's path #resource 'client.contact', path: ':client_id/contact', -> or even if i did not use the dot . notation to preserve the deeply nested namespace client.contact, Then the new contact template will replace the client.index template, and I don't want that...
Of course, I could use a simple div, With a Boolean controller variable to show/hide the div But, I need the nested resource structure for the future (Editing and deleting a client contact)
here is my templates structure:
templates/
|-- client/
| | edit.hbs
| | index.hbs
| |-- contact/
| | new.hbs
|-- clients/
| | new.hbs
So, How can I achive that? I don't get it why the contact.new template is replacing the client.index template in the first place, Isn't it supposed to be Nested resources === nested UI/templates ?
Any help, Tips, Or advice is highly appreciated, I really spent the last 2 days digging and trying different solutions with no luck...
Found a couple similar questions here, But they were trying to achieve different goals.
Related
In emberjs, I am in a situation that my application already has routes template that uses the application.hbs template, but now I want to create a new route templates that doesn't use application.hbs.
Is there any easy solution for that?
I have seen many answers but that doesn't match my specification and also my version of ember is 2.11.
Thank you.
Keep application.hbs as minimal and common across all routes as you can. What you shoud do is generate top level routes for your application.
Say you have a common setup where you have an authenticated section, post login, and a login section. It is common for pre and post login to have differing top level templates. Try something like this:
ember g route login
ember g route login/index
ember g route login/forgot-password
ember g route authenticated
ember g route authenticated/index
ember g route authenticated/profile
etc...
Your login.hbs would have its own style, and potentially child routes, which will assume that style and place subsequent nested templates in the {{outlet}} that others have mentioned.
File Structure:
routes/
-login/
----index.hbs
----forgot-password.hbs
-authenticated/
----index.hbs
----profile.hbs
login.hbs
authenticated.hbs
application.hbs
In the example above, login.hbs might look like this:
{{yellow-navbar}}
{{outlet}}
and authenticated.hbs like this:
{{pink-navbar}}
{{user.name}}
{{outlet}}
Now, the login/index.hbs and login/forgot-password.hbs templates will render in the login.hbs outlet. both of these pages will render a yellow navbar, and then their own content.
Because authenticated.hbs is another top level parent route, both authenticated/index.hbs and authenticated/profile.hbs will render their content beneath a pink navbar and a display of the current user's name.
if your application.hbs looked like this:
{{#general-site-container}}
<h2>Website Name</h2>
{{outlet}}
{{/general-site-container}}
Then all of the routes, both authenticated and login, will be in the general-site-container, and will all show the h2 with the website name.
An important note in this, and something that I see a lot of people get confused with, is that this folder structure does not dictate the actual path of the route.
The router might be configured like this, to avoid showing "authenticated" in the url:
Router.js
// login.index route assumed at root url /login
this.route('login', { path: '/login' }, function() {
// avail at /login/forgot-password
this.route('forgot-password', { path: '/forgot-password' }
});
//authenticated.index.hbs assumed at root avail at /
//notice that the authenticated parent route has a route of "/"
this.route('authenticated', { path: '/' }, function() {
// authenticated.profile route avail at /profile
this.route('profile', { path: '/profile' });
// as an exmaple you can further nest content to your desire
// if for instance your profile personal info section has a parent
// template/route
this.route('', { path: '/personal-info' }, function() {
this.route('address', { path: '/address' }); //profile/personal-info/address
});
});
i think you need to use {{outlet}} for achieve this.
create diffrent outlets where you need to show diffrent templates by overriding application template
{{outlet}} //application hbs default one
{{outlet "view1"}} // another template
{{outlet "view2"}} //another template
there should be view1.hbs and view2.hbs in order to render those templates
I am learning Ember, and I have an app that has nested routes. The outer route renders an index of products that acts as a sidebar, and the inner route renders the selected product.
So I have a setup like this in my coffeescript router:
#resource 'products', ->
#resource 'product'
And then I have a template like so for product_types.js.emblem:
each product in controller
.product<NEED_SOMETHING_HERE>
I want NEED_SOMETHING_HERE to give me an extra attribute that will allow me to add a style to the product which will be rendered in the inner route. A class "active", or something similar, is the convention I would use elsewhere. What is the Ember way to do this?
Ember actually does this automatically with the link-to helper!
Ember adds an "active" class when the link matches the current route
http://emberjs.com/guides/templates/links/#toc_the-code-link-to-code-helper
How to add css class to the body tag on specific route? I tried to use body tag in a handlebars template but didn't work...
Update:
After some googling I came with this solution. Not sure that this is the best way to do this, but it works.
App.SomeRoute = Em.Route.extend
activate: ->
Em.$('body').addClass 'some-class'
deactivate: ->
Em.$('body').removeClass 'some-class'
Can someone explain in layman's terms the way nested outlets work in ember templates?
In particular trying understand this from the docs:
http://emberjs.com/guides/routing/rendering-a-template/
"The immediate parent route did not render into the main outlet ..."
This means that the current route tried to render into the parent
route's template, but the parent route didn't render a template, or,
if it did, that the template which the parent route provided did not
render into the main template (i.e., a default {{outlet}}).
More specifically I am trying understand how to create a nested view hierarchy in my app.
It is three layers deep of collections. I want to create a series of collapsible nested views, based on the contents of the collections. The data structure could be tree like.
Libraries -> each Library has many Books -> each Book has many Pages
Looking for an illustrative jsbin or code sample that demonstrates the nested template structure in practice.
Imagine a router that looks like this:
App.Router.map(function() {
this.resource('libraries', function() {
this.route('new');
this.resource('library', {path: ':library_id'}, function() {
this.resource('books', function() {
this.route('new');
this.resource('book', {path: ':book_id'}, function() {
this.resource('pages', function() {
this.route('new');
this.resource('page', {path: ':page_id'}, function() {
}); // Page
}); // Pages
}); // Book
}); // Books
}); // Library
}); // Libraries
}); // map
In general most templating languages provide some way to wrap the target content of a page into a main layout. This allows separation of the common page layout into another file and the smaller target template in a different file.
There have been a few iterations of this in Ember, currently this functionality is provided by the {{outlet}} helper. Outlets are Ember's way to yield into a layout.
The area where outlet diverges significantly from yield is nesting. Yielding on server-side is much simpler. You only need to mark areas of a template to yield into and then call to yield a block of content into that designated target.
However when the rendering of content is switched to client-side javascript, only parts of a page are updated on demand. You can no longer simply yield directly into markers. You need a smarter yield ie:- outlet.
There are 2 sides to an {{outlet}}.
A marker that indicates where you want to yield. This is the {{outlet}} helper.
Code that renders a template into this outlet. This is the render method used inside the renderTemplate hook.
By default an {{outlet}} does not need a name. This makes it the default outlet for that template. There can be many such outlets in a template and they can be specified by giving it a name. For eg:-
{{outlet 'sidebar'}}
{{outlet 'nav'}}
This declares 2 outlets named 'sidebar' and 'nav'. You can now render other templates into these outlets.
Default outlets are used when rendering without an explicit outlet name. For named outlets the rendering is done by calling render in a renderTemplate hook of a Route.
You do this by specifying an outlet option in a hash passed to the render method as options.
renderTemplate() {
this.render('recentPosts', { outlet: 'sidebar' });
}
Here, the template recentPosts will be rendered into an outlet named 'sidebar' inside its parent template.
When routes are nested inside other nested routes they will render into the nearest parent outlet. If the parent resource doesn't have a default outlet then it's parent is used, and so on until the application template is reached.
When you declare a resource with this.resource('posts'); in the Router, you are indicating a few things based on convention.
Render the posts route with the layout template posts.
Optionally, render the implicit posts.index route with the template posts/index.
The posts template contains layout common to all posts and it's sub resources. At the bare minimum it must contain at least a default outlet like, {{outlet}}.
Without this {{outlet}} child routes will not have an immediate parent outlet to render into. They will then render in that parent's parent or ultimately the application template's outlet. When this happens you will see the "The immediate parent route did not render into the main outlet ..." warning. Check the location of your outlets when this happens.
The posts.index is an implicit route given to all resources that have nested routes. In other words if your resource has nested routes, you don't need to explicitly declare a nested, this.route('index)`.
This index route can display the content of that resource. For instance, for posts.index, You can display a list of all posts. One secondary caveat with this implicit route is that the model is on the parent posts route. You have to use the needs api to get at this model in the PostsIndexController.
needs: ['posts'],
contentBinding: 'controller.posts'
Further, this posts.index route is optional. You can place the UI from posts/index used to display a list of posts, directly into the posts template itself. However this means any child resource will also render with the list of posts, along side the outlet in posts. The decision whether to use an explicit index route or not depends on the UI that needs to be displayed.
Sitting above all other templates is the application template. It must have an outlet for nested resources to render in, and will typically house the layout common to the page. If you don't specify an application template a default template will be used. This generated template is equivalent to {{outlet}}, ie:- a template with just a default outlet.
Consider the following routes.
App.Router.map(function() {
this.resource('posts', function() {
this.route('new')
this.resource('post', {path: ':post_id'}, function() {
this.resource('comments', function() {
this.route('new');
});
});
});
});
Here, posts.new will be rendered into posts which will be rendered inside posts, which will be rendered into the application template's default outlet. The rest of the templates used are listed below.
+---------------------------+--------------------------------------------------------+
| Route | Templates used (default outlets) |
+---------------------------+--------------------------------------------------------+
| posts.index | posts.index > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.new | posts.new > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.index | post.index > post > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.new | post.new > post > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.comments.index | comments.index > comments > post > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.comments.new | comments.new > comments > post > posts > application |
+---------------------------+--------------------------------------------------------+
This default template hierarchy can be changed by specifying an into option to the render method.
renderTemplate: function() {
this.render('posts', { into: 'sidebar' })
}
Here the posts template will render into the default outlet of the sidebar template.
That's about it. Outlet is another ember concept that uses a good deal of convention over configuration. The defaults are quite good, at the same time easy to customize.
Take the following route:
#resource 'settings', path: '/settings', ->
#route 'alerts'
and the following link:
{{#linkTo settings.index}}Settings{{/linkTo}}
Is there a specific way in Ember to ensure that the above link is .active as long as I am at a settings.* route?
I'm pretty sure that if you instead use:
{{#linkTo "settings"}}Settings{{/linkTo}}
it will stay active as long as you are within the settings.* route. The above link will route to settings.index anyway.