I got a Leaflet map rendered as a view with controller in application template like {{view "map" locations }}. locations is an array of location models.
In index route the locations data is loaded and set on application controller to be passed on to the map view. This happens that way because other routes can set another content for locations and so change the markers on the map.
In the map view the Leaflet map is set up and the markers are created from locations. I want to be each marker to be clickable, so the app transitions to the route where the “clicked” location is described in detail. Therefor I have to bind a click event handler right after creation when I have the location model at hand like
mapMarker.on('click', function(ev) {
// Do transition to 'location' with model location
});
I’d love to keep the routing stuff in the router/routes. In a template I’d use a link-to helper, but how to a transition from a click event defined within a view? I tried to use sendAction but it seems this doesn’t work here because of the view being rendered in its on scope so the action doesn’t bubble up to application route. Any ideas?
For the click event to bubble up to the routes you have to send it to the current controller.
this.get('controller').send('someEvent')
Doing just send() makes the action bubble up only to parent views.
Now, if you were to use the action helper in your template, in that case it goes directly to the controller. And if the controller doesn't implement the action, it will bubble up to the route.
See http://emberjs.com/guides/templates/actions/#toc_action-bubbling
Related
I know the concept of Data Down / Actions Up, but I'm facing a situation on which I don't know how to do it with the DDAU. I searched on differents forum and blogs how to do it, but it does not fit my request.
I have a controller with two components.
On the first component I have a header with a button.
On the second component I have a form.
When the button is clicked, an action is trigered and catched by the controller, but how can I notify the second component of the "click" on the button on the first component.
An easy solution would have been to include the first component in the second one, but I can't do this because each component are used in many different situations.
You can use services as a bus.
Register an event on second component and trigger that event from first component.
I show it in this twiddle
If you don't want using services you can use parent-child model.
Please take a look at that twiddle
You can pass foo property from controller to both components, and first component to pass action to controller to change foo. Now this sibling component too will be notified and you can make use of didUpdateAttrs hook in sibling component to react to change.
I have the following routes, controllers and views:
products
products.index
products.product
products.category
products.new
I view a list of products on products. For all other routes, except for products.index, I want to change the property blurred on the products controller (which blurs the list), so I can view a template on top of it.
Where and how should I do this? Is this something I should put in the view or the controller? I need to be able to determine which route is the child of products.
Update
I need the list on products so it stays in tact, this way the scrollposition is remembered and most importantly, I can 'blur' the product list and show templates on top of it.
The index route was created for this very purpose. I'd recommend just moving that list from products into the products/index template. Then it'll only show up when you're on /products and won't show up any time your on any route/resource deeper.
If you don't want to do that, then you could easily put it in your controller, and follow the pattern shown in this answer: State of nested routes in EmberJS
In the OfferRoute I have a container and a controller's method to add views dinamically to it:
addProduct: function() {
var container = Ember.View.views['containerView'];
var child = container.createChildView(Gmcontrolpanel.InsertProductView);
container.pushObject(child);
}
Everything works fine but if I go to another page on the application and then I come back to the offer page, the child views in the container are missing;
I can see that the HTML output is the empty container:
<div id="containerView" class="ember-view"></div>
Does someone know why is this happening?
Views redraws when you switch pages. So, you get a new containerView instance with empty children list every time.
I'm not recommending to use Em.View.views object for that task. If you need to store state of data between redrawing, it's more likely controller job, and containerView needs to bind to this controller.product list and display each product.
It's possible that {{#each}} helper or custom CollectionView is what will help you to solve the task more elegant.
I have a simple application that uses jqplot to graph data. This application has a single route attached to an ArrayController. I display the items to be graphed on the left side using the {{#each}} helper; I also display a 'graph' button up top. The user can select one or more entries from the list and hit the graph button. The button is attached to an action that calls jqplot to graph the selected data on the right side. Functionally, this works fine, but feels like a hack. Does anyone have an opinion on how this can be re-structured to perform similar function the 'Ember way'?
This app only has one model, so doesn't seem like I would need a second route. I do need to somehow handle re-graphing if the user resizes the window. If I weren't using Ember, I would handle window resizing like this:
$(window).resize(function(){
plot1.replot ({resetAxes: true});
});
where 'plot1' is the return value from the original call to jqplot.
How do I do this in Ember?
I'm using Ember 1.4 with EmberData beta 7.
You can put custom JS code in the didInsertElement() hook of your view, which will be executed after the view is rendered.
There's a corresponding willDestroyElement() hook for your teardown code.
I am working on a bit of code to show a D3 chart using Ember fixture data as the source for the data. The charts show up just fine on the first load of the page but if I move to a different route & then return to the first route (the one with the working chart) the chart simply disappears. So I guess my question is, how do I get the chart to appear every time the route is visited? Here is what my Route and View code looks like, will add more code if requested.
Updated with JS Bin: http://jsbin.com/ihapaz/2/edit
The route may not be getting any data when you return back to it. When using linkTo the model hooks are not fired. The setupController is called directly with the model that you pass to linkTo. However if the route depends on the model hook having fired to load it data then the view would be empty as it wouldn't have any data to render.
That's the only thing that comes to mind from the above code. Try posting a jsbin if this doesn't work.
Edit: Post jsbin
After looking at your jsbin I realized my earlier answer was incorrect. In general it is true that linkTo skips the model hook, but only if dynamic segments are present. Your route has no dynamic segments. Hence the model hook will always be called, so the view/chart is getting data correctly.
The error is in your implementation of render. The purpose of the render method is to push strings of html onto the DOM. This isn't the appropriate place for custom DOM insertion. For that you need to put things on the didInsertElement method.
I made these changes, renaming render to didInsertElement and the corresponding updateChart. Here's the updated jsbin.