What is a good way to show a reusable loading screen whilst controllers are performing time consuming actions such as server queries. Ember provides shared loading route functionality for route transitions perhaps someone has been able to leverage these in controllers as well?
My current thinking is to implement actions in the ApplicationController to show and hide a loading div. Controllers can then call these before and after time consuming actions. Perhaps someone has a better solution?
I believe you have a few options. I would do one of these two:
Define a loading route/template. The loading template will be rendered into the outlet of the parent route and will be replaced by the current route's contents when the transition is complete. I did this once where I used a modal dialog to display a loading message.
Define actions in ApplicationRoute. Actions bubble from a controller, to the matching route, then up the route chain. If you define actions in the topmost route, you can send a message from any controller that will be caught. I currently have startLoading and stopLoading actions in my ApplicationRoute.
Related
I need to change the layout componet value from page level template.
like in picture x.hbs may vary according to route.each spesific route may have add to cart button and when add to cart button click the layout component price should be updated.
how to do something like this in emberjs way?
To manage global state you should use an service.
However for you use-case I would just rely on the store-Service provided by ember-data. You probably should create a model for your shopping-cart-items. Then you can do something like store.findAll('shopping-cart-item') in your application routes model hook. In the application controller you can get the sum with a simple Computed Property.
Now if you add items to your cart, ember-data will keep everything in sync.
Maybe checkout this twiddle for demonstration.
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'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.
I want there to be a loading spinner shown while my routes are loading but unfortunately none of my templates render until whatever route I'm in is done loading?.
Ember has a built loading route at each resource level (including the root of the app). If you have a long last request at the application route it will block the highest available loading route. http://emberjs.com/guides/routing/loading-and-error-substates/
If a route with the path foo.bar.baz returns a promise that doesn't immediately resolve, Ember will try to find a loading route in the hierarchy above foo.bar.baz that it can transition into, starting with foo.bar.baz's sibling:
http://emberjs.jsbin.com/OxIDiVU/716/edit
Is it possible to reenter the loading state manually?
Right now I have a template that matches the loading rule mentioned at their webpage:
Ember will find a loading route at the above location if
[...]
a properly-named loading template has been found, e.g.
bar/loading
foo/loading
loading
When transitioning to the page, it uses this template, which is great. However, I would like to enter that same loading state while my web request busy. Currently, I am reimplementing that template in the page and toggling it, which duplicates code. I would rather tell ember when I am in loading state or not manually.
Edit: In response to comment, the web requests both set and push data to the model (search button and "infinite scroll" pagination)
You could use transitionToRoute() to transition into (and out of) a loading route while your request is in progress.