I've a generic route /login that displays the login form inside a modal. Now I want the content behind to remain the same of the previous url.
How do you go about this?
Thank you
Trying to implement login modal form as a generic /login route is probably not the best option, as it does not go well with the way Ember routes work, which can be summarised as follows:
Given url is matched to (possibly multiple nested) routes.
Each matched route resolves it's model and then renders corresponding templates to appropriate outlets. Templates for previous route are wiped out.
Navigating to generic /login would wipe out the templates rendered by previous route - namely there would be no content in the modal background (see also related question).
I would suggest either:
Not rendering /login route in modal dialog, but instead in the main app outlet, and only then redirecting user to the previous route. UI experience is probably not much worse as user probably does not need any information from the modal background anyway.
Instead of having generic /login route, you could use query parameter, e.g. ?should_login=true on ApplicationController which would render login modal in appropriate outlet. This way primary application state would still be encapsulated in the route url, thus templates for the previous would be properly rendered in the modal background. Suggested approach on how to handle modal dialog can be found here.
Related
This is a pretty newbie question. However, in EmberJS, I've found that both of the methods work for linking to the blog page in my application.
<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p>
See my blog
Is it better to use {{link-to}} in EmberJS? How come?
The difference is that the {{link-to}} component will navigate to the specified route within the current running Ember application, while <a href="posts"> will do a new browser request to that location and re-start your Ember app at that route. You should use {{link-to}} since you'll be using the Ember internals to navigate within your single-page application and it will be a smoother user experience.
While they both can work, watch your browser closely and you'll see the anchor tag will give you a page refresh and re-launch your Ember app (though in the right location). Using a {{link-to}} will feel faster since Ember is presenting the new page via javascript rather than restarting after a page refresh. It's the difference between navigating within a single-page application, and jumping into a SPA from an external page.
While Ember does render an anchor tag in place of the {{link-to}} at run-time, it interjects to stop the default anchor tag behaviour. The docs explain it like so:
By default the {{link-to}} component prevents the default browser
action by calling preventDefault() as this sort of action bubbling is
normally handled internally and we do not want to take the browser to
a new URL (for example).
(from https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action)
Also, with the {{link-to}} component you can pass a model directly into the route. This is a bit more advanced, but the Ember guides have some good examples.
https://guides.emberjs.com/v2.13.0/templates/links/
I'd like to implement a Pinterest style modal page for items (images/items/posts/etc...). Whichever page you are on, when you click on a item a modal with the item details pops up, and the page (feed) where you are from still sits in the background. The url in the address bar changes so you can link to the item from other sites or share it to your friends. And when you close the item modal your still at the feed.
Does Ember support this type of routing?
I know react-router has support for it, so I imagine Ember would as well as it is heavily inspired by Ember-router.
Source: https://github.com/rackt/react-router/tree/master/examples/pinterest
"The url /pictures/:id can potentially match two routes, it all depends on if the url was navigated to from the feed or not."
"Click on an item in the feed, and see that it opens in an overlay. Then copy/paste it into a different browser window (Like Chrome -> Firefox), and see that the image does not render inside the overlay. One URL, two session dependent routes and UI :D"
Linked Ember.js discussion: http://discuss.emberjs.com/t/pinterest-style-routes/8487
I think there is no such native behavior since one path will match one route, but it can be managed with some outlets and conditional display and nested routing.
The following router will provide almost everything needed to perform what you want:
// router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('pictures', function() {
this.route('picture', {
path: '/picture/:picture_id',
resetNamespace: true
});
});
});
export default Router;
With route nesting, you should be able to display the pictures list if provided by the pictures route (and show link to single result), choose single picture display (popup vs single result) based on the presence or not of the results (picture route can access pictures model with this.modelFor('pictures')), and still get the benefits of the identifiable resource URL pattern.
YMMV, but you can also juggle with the picture's route renderTemplate method to render the result in specific outlet if you want to completely separate single picture rendering from pictures tree.
EDIT: link to react example is broken, did you mean https://github.com/rackt/react-router/tree/master/examples/pinterest?
EDIT2: Adding route to a modal/overlay in Ember.js
sorry for my English. I will try to explain better I can.
I have an application in EmberJS, this application have its routes. Also, when I click in a button, I should show a Modal Window and change the route. That problem was resolved. The problem is. This modal window must to be a kindly of wizard, so when the user click on next, I should to change the route and show inside the modal the correct content, when the user click in next again, the route must to change again but the new content should be showed into the modal too.
The problem seems to be, ember takes my application outlet and show the new content inside that outlet, not inside of the outlet defined into the modal.
How I achieve this?
As I understand from the EmberJS Guide to Routing, you should specify the model you want a route to load in the Route's model hook. The model hook may return a promise, and if it does, the route will pause until the promise resolves.
Therein lies my problem: this approach works fantastically under normal use cases (user triggers a transition from any other route into the route in question.) The problem arises if the user is currently at the route in question.
If the user triggers a page refresh (using the browser's refresh button, or ctrl+r or whatever other trigger there might be, the promise in the model hook causes the user to sit at a blank white page until that promise returns. In large dataset cases, this can be a handful of seconds, which does not make for a great user experience.
So, how do I resolve this issue?
The only solution I have developed is to trigger the data load in the route's activate hook, and manually set the controller's model when that promise returns. I don't like doing this, because I'm circumventing the entirety of Ember's model framework.
I would like the application template to render before the model hook hangs the page, at a bare minimum. Any guidance on how to resolve this would be greatly appreciated.
In case the context is necessary: as the tags imply, I am using Ember-Data. I'm utilizing the RESTAdapter almost entirely out-of-the-box, unmodified.
Routes have sub-states that can be used to render a temporary template while the model is loading. See: http://guides.emberjs.com/v1.10.0/routing/loading-and-error-substates/
The first load/initial blank page is a UX problem that will be solved by Fast Boot, see: http://emberjs.com/blog/2014/12/22/inside-fastboot-the-road-to-server-side-rendering.html
Fast boot is already available through one of Ember's branches, I don't know the name.
I am trying out ember.js with rails, and have a question about routing. Is a # sign supposed to be in every one of my routes?
I have a really simple app with only one route:
App.Router.map () ->
#resource "blogs"
When I go to my index path, my index template is rendered as expected, it has a link to the blogs route {{#link-to 'blogs'}}Blogs{{/link-to}} that has a corresponding template located as templates/blogs. When clicking on this link, my app redirects to host.com/#/blogs. Is this the expected behavior with the # being placed in the path? Navigating to /blogs simply renders the index template and not templates/blogs.
yes, Ember, like many frameworks, takes advantage of using the hash sign for its routing. You can disable it and use location as your history, but that will limit the browsers you support (http://emberjs.com/guides/routing/specifying-the-location-api/).
You'll recognize the hash sign is generally used as a way of bookmarking a spot on the page, and when you click a link with the hash the base url never changes. This allows the page to change the url, but not have to refresh the entire page.