I have button on my template(not in component) and need to add click event for it.what is the correct js file to place my click event ?
I search from ember site where it state that component action should put in respective component js action or it will bubbule up to route js . Either It have not mansion or I couldn't find where to put template(not in component) action since there are no place to add the action other than respective route js file.
so is it ok to put my template action in respective route js file ?
I am novice to ember and sorry for poor English.
Yes, you can put action handler(s) inside your route.
You can handle template event from either corresponding controller or router.
Just put the handling function inside actions property inside either place.
The order template look for action is controller first ,router and upper router untile application router.
Related
I am trying to create a popup which is available and controlled by across application.
so I keep the html assets in app template. and the I would like to show and hide the popup any page from the app.
I understand that, It can achivable by service. but I don't have much idea to implement this. any one suggest me the right way?
Required is : show popup from any page, close pupup on click of close button in the popup.
here is my Twiddle
In case of angular it can be achieved from factory object.
I would probably do this:
create a component for the popup
create a service for the popup that that exposes methods for setting a property called "isOpen" to true/false. Other parts of the app can use the methods for opening and closing the popup.
Inject the popup service into the application controller
Add it to the application template in an {{if popupService.isOpen}} block
Good luck, remember to write lots of tests, make sure each part is working before you go to the next step, and remember to consult the guides often ;-)
For example, say I have:
a master-detail setup (a Widgets route, with a nested Widget route)
in the master template I model, which is Widget.all to a component that lays it out as a list of {{link-to}} each of which transitions to the widgets.widget route
...then what is/are the recommended way(s) in ember 2 to tell that component what the selected widget is, so it can highlight its link?
Ember's routing infrastructure automatically handles adding active classes to links provided you're using the link-to helper.
See emberjs - how to mark active menu item using router infrastructure
If you want to use a tag besides an anchor tag, like an li, see: Create a <li class="active"> around an active {{linkTo}}
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?
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.
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.