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}}
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.
I have my problem with link-to help, I want to use it with bootstrap navigation, but I can't manage well active link state, so I'm trying to write a component, but I need to get the current route inside the component, so I can create the html element based on the route.
I searched in the api reference, but didn't find nothing.
PS: I know there is an add-on to do that by I'm doing that to learn the framework.
sorry for my bad English.
/ controller.hbs
{{ my-component controller=this }}
# my-component.coffee
#get('controller.target') # this is the route
If you need the CURRENT route, as opposed to the route associated with the controller that your component is instantiated in, you would inject the application controller into your component, and get the current route.
applicationController: Ember.inject.controller('application')
currentPath: Ember.computed.alias 'applicationController.currentPath'
http://emberjs.com/api/classes/Ember.Controller.html#property_target
Bootstrap components (model, tab, dropdown) are not working when switching the routes in EmberJs
I have two {{outlet}} in my application.hbs, one for login and other for all other pages.
{{#if isLoggedIn}}
<div class="main">{{outlet}}<div>
{{else}}
<div class="login">{{outlet}}</div>
{{/if}}
Initially the bootstrap components are working fine, If i transition to login and come back to other routes then the components in other routes are not working.
The tabs worked before are not clickable.
The dropdown menu are not clickable.
The model is not showing up on clicking on button.
If i use same outlet for both routes then it works fine.
On a transition change, ember drastically modifies the DOM. This means on every change in DOM structure you have to reinitialize your bootstrap components.
To solve this issue you got two options.
Implement your own components and call specific bootstrap initialization methods on didInsertElement hook.
Use an existing ember addon like ember-bootstrap that provides all bootstrap components as ember components.
I would stick to way 2.
I am using emberjs. I have sub-nav, but due to some constraints, I can't use nested routes. I want to show active class to both the parent nav and current route nav. How to achieve this?
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.