I have an ember application with nested routes but I'm having a problem getting a child view destroyed when transitioning back to the parent route. Probably easiest to look at this fiddle http://jsfiddle.net/j32yT/2/ - it starts by displaying a list of "users"; clicking Create leads to a user creation "form" with a Save button. On save, the action is fired back at the route which transitions back to its parent.
I was hoping that the create view would be destroyed when transitioning away, but it doesn't seem to. Adding in a function to handle the route exit does let me clean up, but it seems a bit messy. Have I misunderstood how the routing works?
UPDATE
By introducing an index route within my users route, I was able to achieve what I wanted - there's a new fiddle here http://jsfiddle.net/AsJca/1/ - am I on the right path here? New to this stuff, so don't yet understand what may constitute best practice!
You have an outlet for Application View and one for UsersView,
<script id="application-template" type="text/x-handlebars">
{{outlet}}
</script>
<script id="users-template" type="text/x-handlebars">
{{#each user in controller}}
{{user.name}}
{{/each}}
<button {{action create_user}}>Create</button>
{{outlet}}
</script>
When you do :
router.get('applicationController').connectOutlet('users');
the outlet of applicationView gets filled with UsersView, but see that the Users View has its own outlet.and when you do router.get('usersController').connectOutlet('createUser'); this outlet is filled with the create new form. So it resides along with the create new button that resides along with the outlet in users-template.
You can change it to,
router.get('applicationController').connectOutlet('createUser');
if you want to replace it, but again think of what you actually need, you know that.
Related
I have a list if items in an items route that uses a component event-item to display each of them. This component has two computed's on it that are setting some classes right now to show the user some info about each item...
classNameBindings: ['winning','closed'],
item: null,
winning: Ember.computed('item.item_high_bid_user_id','userService.user_id',function(){
return this.get('item.item_high_bid_user_id') == this.get('userService.user_id');
}),
closed: Ember.computed('item.item_status',function(){
return this.get('item.item_status') === 2;
})
In the component template each item in the list is wrapped in a link-to that links to the item route, which displays a single item.
In the item template and even route I would like to observe the winning and closed computed's that are on the corresponding component to show or hide some things in the item template (IE. hid the bidding section if an item is closed, etc.)
What would be the proper way to do this?
BTW I'm on Ember 2.2.0 Ember Data 2.2.0 and Ember-cli 1.13.13
If your event-item component is linking to an item route, I assume you're passing the item model into the link-to helper, which means all the attributes needed to compute these properties are still going to be available in the item controller.
// templates/whichever-template-holds-items.hbs
{{#each items as |item|}}
{{event-item model=item}}
{{/each}}
// templates/components/event-item.hbs
<div>
{{link-to 'item' model}} // pass model to item route
</div>
// controllers/item.js
import Ember from 'ember';
export default Ember.Controller.extend({
// include userService
winning: Ember.computed.equal('model.item_high_bid_user_id','userService.user_id'),
closed: Ember.computed.equal('model.item_status', 2)
});
// templates/item.hbs
{{#if winning}}
// show winning stuff
{{/if}}
{{#if closed}}
// show closed stuff
{{/if}}
Also, I noticed you had a mix of both == and === for your conditionals in the code you posted. Most of the time you will want to use ===, see this post.
Almost forgot - Ember.computed.equal
UPDATE (in response to your comment below)
There are a couple ways to alert a controller that a value in a component has changed, but neither are really conducive in your current situation.
The first way (which is ok to do) would be to follow DDAU (data down, actions up) and send an action from your component up to your controller, but this only works if the component is inside the controller's view, which is not the case for what you're doing.
The second way (which is not really ideal IMO) would be to use a service in sort of a pub/sub fashion which would allow distant component/controllers to talk to each other (you can read more about this method here). You'll probably get mixed responses as far as doing things this way since it can be kind of disruptive to the data flow of your app. But sometimes you're choices are limited.
With all this said, I would probably stick with re-computing in the controller rather than trying to send data across your app from one controller to another. In the end it will still be less code and less work for the framework. Hope this was helpful.
Quick note:
I don't believe this is a duplicate of Ember.js: Prevent destroying of views. Other related questions that I've found are out-of-date.
In case this becomes out-of-date later, I am using Ember 1.7.0 with Handlebars 1.3.0.
Context for the question:
As the title states, I am wondering how to transition between views without destroying them. Using queryParams does not solve my issue.
I am creating a calculator with the following nested views:
>>Calculator View
>>Report View (hasMany relationship to Calculator)
--School Partial (I am using queryParams here)
I am able to navigate between the Report views just fine without destroying my School partial, since I am using queryParams and using a displaySchoolPartial boolean to show/hide the partial. Example below:
Report template (stripped to only show the essential part):
<script type="text/x-handlebars" data-template-name="calculator/report">
...
{{#link-to "calculator.report" (query-parameters displaySchoolPartial="true")}}
{{render "_school"}}
</script>
School template (also stripped down):
<script type="text/x-handlebars" data-template-name="_school">
{{#with controllers.calculatorReport}}
<div {{bind-attr class=":schoolPartialWrapper displaySchoolPartial::hide-element"}}>
...
</div>
{{/with}}
</script>
This works as expected. Navigating between different Report views and School partials, as stated before, does not destroy the view.
The problem:
My problem comes when navigating to the Calculator view, the Report view is destroyed, which then destroys my School view. I do not want to also use queryParams to replace my Report views.
The reason I need to make sure the views aren't destroyed is because I have a select box with 3,000 schools in my School partial. It takes too long to re-render this. It would be a much better UX to simply show/hide the Report views.
Don't fight with Ember. You will lose.
Views are instantiated and rendered when needed and torn down when done.
Why do you have a 3000-element dropdown, anyway?
If you really, really want to do this, what I would suggest is putting a {{render}} on your application page, and hide it. The view will be created and rendered when the app comes up and persist as long as the app is alive. Then, in the didInsertElement of your view, do a cloneNode of that hidden element and insert it into the view's DOM somewhere. You may have to muck around getting event handlers wired up correctly.
My suggestion is not using "render" but using "partial", so you only need to drop in the template that you want. Have a control variable that set show/hide via css class. And control that variable using you controllers.
Using "partial" will allow you to have school template independent from report, thereby removing report will not affect school.
Just make sure you define the outlet and partial correctly.
Hope it helps!
I've setup a State Manager for tracking user login state, based on this answer here: Change Navbar based on login state
However, I'd like to take it to the next step and have not only the navbar update according to the state, but the main template itself. I've gotten this mostly working so that when you click on the login button it will show you the 'welcome you're now logged in message.' However, if you logout and try to login again, it just shows a blank screen as if it is not correctly re-rendering the index route. Here's a JSFiddle with my issue. Notice what happens when you click on login / logout and then login a 2nd time. the 'welcome' message is not displayed.
Here is my index template:
{{render navbar}}
{{authState}}
{{#if isAuthenticated}}
{{outlet}}
{{else}}
{{render login}}
{{/if}}
I can see the 'authState' is correct, but the 'outlet' is not rendered the 2nd time I login...
Here is the complete jsfiddle:
http://jsfiddle.net/Benmonro/HmJyu/1/
CLARIFICATION
#ham asked for a clarification, so here goes:
The main thing I'm trying to accomplish here is that when a state manager changes the state of isAuthenticated then what is currently rendered in {{outlet}} should be swapped out for what is rendered in {{render login}} which could really be any template. The main point is that {{outlet}} will show and hide w/ the state change...
The reason why it doesn't work is because you have two DOM nodes with id index. In your fiddle is extra </script> at the end of HTML pane but it doesn't matter I guess.
ID in DOM must be unique, otherwise you can see some unexpected issues like this one. You can read more here https://developer.mozilla.org/en/docs/DOM/element.id
Here is working fork of your fiddle - http://jsfiddle.net/wbednarski/eMcXq/
BTW, You may find helpful as well - Difference between == and === in JavaScript
You are not transitioning out of your router, but are only changing the state of your LoginStateManager. If you include the routing output in your App creation, you will see the output, and the lack of transitioning out of your "welcome" state.
Just change App to:
App = Ember.Application.create({ LOG_TRANSITIONS: true });
You will see that using your login-button on the navBar will perform the correct function once, where the button on the login form doesn't transition state, and therefor doesn't show the correct result. This is because in the App.NavBarController you perform this.transitionToRoute("welcome").
Just extend all your logins and logouts with:
this.transitionToRoute("welcome") or this.transitionToRoute("index") and it works like a charm.
[edit] Added an example fiddle here: http://jsfiddle.net/AlphaEagle/rGNca/4/ Hope it helps! [/edit]
I have an Ember JS confusion. First of all I have to admit I'm a bit of an Ember newbie so apologies if this is obvious.
I have the following template:
<script type="text/x-handlebars" data-template-name="threadListItem">
{{#linkTo show thread.receiverLogin}}
<h4>{{thread.receiver.login}}</h4>
<span>{{view.prettyTime}}</span>
{{/linkTo}}
</script>
There's basically a linkTo helper with some elements inside of it.
The weird thing is the {{view.prettyTime}} doesn't display anything when it's inside the linkTo.
However, if I move the span outside the linkTo it finds the view variable ok and it works.
Is there anyway to get access to the view object inside the linkTo?
Christopher is correct that you can access the prettyTime property with:
{{view.parentView.prettyTime}}
Since you're new to ember, it's maybe worth mentioning that in most cases it is best to avoid accessing properties of the view. Instead, consider adding a prettyTime property to your controller. The controller will be the default context for sub-views like the one created by the linkTo helper, so you'll be able to access it with just
{{prettyTime}}
linkTo creates its own view, so the view you want to get access to is the parentView of view.
{{view.parentView.prettyTime}}
I was trying to fully understand the previous answer of the question emberjs - how to mark active menu item using router infrastructure
In the answer I tried to simplify (without using a outlet navigation and without adding a second level routing under the root) but in my case the active link doesn't work ://
Here's a fiddle :
http://jsfiddle.net/archange/Scqxw/
What I don't understand in the fiddle is why the "isActive: function()" is not updated after the set on the router... :/
So if someone passing by can explain me the reason. Big Thanks.
And if someone has another solution for handling navigation menu (perhaps using bindAttr ?)
Thanks
What is happening here is that when a template/view creates another view, it gives the newly created view access to it's controller. For example:
<script type="text/x-handlebars" data-template-name="application">
{{view App.NavigationView}}
</script>
The controller of the navigation view is going to be the instance applicationController. This is expected behavior.
If you want to tell your newly created NavigationView to use another controller, just pass that in, like so:
{{view App.NavigationView controllerBinding="navigationController"}}
Please note that I wired these two controllers together in App.ready.
Here is your edited fiddle: http://jsfiddle.net/Scqxw/5/