The new ember router has been throwing me for a loop. Does anyone know how to manually triggering a url change when you are (1) NOT using a redirect in the router (2) NOT using the linkTo helper?
It seems that this:
App.container.lookup('router:main').router
no longer works, as of today's build.
This seems hard to do in new ember router because ember is working hard to prevent you writing code in this style. Rather than access an instance of the router (or anything else) via App your ember application code should be working with properties that have been injected at runtime by the framework. As #sly7_7 mentioned above, your view will have access to the controller and controller can trigger a transition like:
view.get('controller').transitionTo('state')
Depending on how your third party library is working, you might do this by triggering an event in the dom (handled by the view) or by registering a callback when the view is rendered from within didInsertElement
The main thing to remember is that App.anything-in-lowercase is generally bad practice. Whenever possible try to let the framework take care of instantiating and wiring together your application classes.
For more detail, see the notes on this commit: https://github.com/emberjs/ember.js/commit/5becdc4467573f80a5c5dbb51d97c6b9239714a8
You can try this:
App.__container__.lookup('router:main').transitionTo('name_of_your_route');
Related
I have a component working pretty well and now I need to call it inside a controller.
Scenario: I have an ember application, and I have an update button controller, I did a component that just display a toast(Materializecss) with some message I pass as parameter to the component and both the button and the toast are working well separately. I need to call inside the button controller this component to display to the user if the update was successfully or not using this component I did. Any sugestion of how can I call this component inside the controller? Thanks
have a look at the ember-twiddle I created and see if it fits the bill, in regards to what you want to do ?
You should instead of thinking "calling the component", rather, how can I push updated attributes/data to the component.
Ember relies on the "Data Dow Actions Up" pattern. This implies that you cannot make an explicit call to a component action from a controller. (see https://dockyard.com/blog/2015/10/14/best-practices-data-down-actions-up for example)
Instead, a better design should be to define a service to manage data : messages to be "toasted". Then make this service available by injecting in in your controller. You will be able to call methods to register a new messages and generate new data.
Provide also a component template (to be included in your own templates) that will be in charge to display the new message, etc. Each change in the data managed by the service will lead to a component template update.
You should definitely take a look to https://www.npmjs.com/package/ember-toastr
just imagine there are more components rendered in web page, and when i click a link, i route to home page, which fills the entire page. (means all components gone in UI)
What are all the things i should make sure to clean up to avoid memory leaks?
Few examples:
If i used Ember.addObserver in component's didInsertElement, i should remove it using Ember.removeObserver in willDestroyElement method.
And any event handlers attached should be detached.
Can i get some more examples / link to see what are all the things i should cleanup and where?
The ideal is to write your code so that no clean-up is required.
For instance, if you define an observer as
observeWhatever: Ember.observer('whatever', function() {...
no special teardown is necessary. In the same way, if you define an event handler as
click: function(event) { ...
then no tear-down is necessary. But what if you want to listen to a DOM event on some element within your component? We often see people who can't remember whether they're programming in Ember or jQuery do things like:
setupWhatever: function() {
Ember.$('.foo.bar.baz').on('click', function() { alert('baz clicked!'); });
}.on('init')
This is pretty much an anti-pattern, and not just because it will need to be torn down. It is completely jumbling up how to refer to parts of the app, and how to set up callbacks, and how to handle actions. The thing you are referring to as .foo.bar.baz should be its own component, which sets up its own listener at the component level. It would send an action, which would be handled as follows:
{{foo-bar-baz action=(action 'bazClicked')}}
actions: {
bazClicked() { alert('baz clicked'); }
...
}
If you want to set up a hook, such as
listen: Ember.on('message', function() ...
that will also be torn down for you.
If I used Ember.addObserver in component's didInsertElement, I should remove it using Ember.removeObserver in willDestroyElement method.
What kind of observer would you be setting up in didInsertElement? Excessive use of didInsertElement is also an anti-pattern. If you are using Ember correctly, it should hardly ever be necessary. A possible exception is initializing a jQuery add-on, if you are so unfortunate as to be using one of those.
If for whatever reason you are working with timers, you may need to cancel them on exit.
I'm using Ember 2.3 and have built a controller around Ember Highcharts. When a chart point is clicked I send that event back to the controller via the following nasty bit of code added to the highcharts configuration object:
Graph.__container__.lookup('controller:accounts.account.outlets.outlet.ratings').send('pointClick', event);
(I know this is fundamentally wrong and should be using getOwner.lookup for the container reference)
This works without issue, but I'm now refactoring this controller to a component and can't think how to pass the graph event back to the component as components are not registered in the app container.
Any pointers to how to achieve this would be very much appreciated!
Thanks.
UPDATE
I've just discovered that I can send an action to a component from the Highcharts event function:
Graph.__container__.lookup('component:ratingsGraph').send('pointClick', event)
But this seems to create a new instance of the component, rather than send to the existing instance. I guess that makes sense as components aren't singletons.
Very frustrating!
Some days you can't see the wood for the trees!
Instead of defining the highcharts event function in the highcharts configuration parameters, I simply defined it within the component and passed it to highcharts. This enabled me to use a closure to hold reference to the defining component.
Doh!
How can we normally prevent Nothing handled the action error in generic view implementation.
Currently I am reopening controller class and adding empty handler but again if I put it directly Ember throws deprecation message Action handlers implemented directly on controllers are deprecated if I add it in action object it is "not working" (probably overridden) and throws error as if it is not in base controller. Any ideas? Thanks.
If you want a somewhat hacky way to do it, you can add the method to the _actions object on the controller. That's where Ember internally keeps all of the actions for an object. Unfortunately, there's no other way to really handle an unused action from a view. This issue suggested a feature that would allow you to, but it hasn't been implemented yet.
Personally, I don't use straight views at all, I only use components. Components allow you to subscribe to particular events (let them bubble up) and ignore the others completely.
Quick context:
Application view has 2 outlets. One for a toolbar. The other for the routable "main" view hierarchy.
app -- main
\-- toolbar
I need some buttons in the toolbar to trigger events in the "main" view. Not update any data in any model. I simply instruct it to trigger some changes to a drawing library that the view is presenting. Clearing the canvas, resetting zoom value and such.
In 1.0 pre2 and earlier I have used actions and router.get('someController.view') to get access to the view I want and trigger the action/method/event. Hardly the pinnacle of application design but it worked fine.
This option is now gone and I am at a loss for a good alternative. What mechanism should I use when communicating between views that are not in a child/parent hierarchy? Everything I have come up with is clunky and triggers my sense that "Ember has a better way".
In short I want:
A toolbar-button to trigger an event
The main view to react to this and perform some updates on parts of itself.
The main view to NOT re-render in the Ember sense of the word as would through routing. It uses a drawing library and integrating all it's properties and behavior into Ember models and controllers would not be a lot of fun.
The toolbar and the main view share a parent view but are on different "branches".
Poor Options I am considering:
The toolbar is very much an application level concern but it does have some buttons that need to instruct specific views. One option I see within Ember is to nest the toolbar under the "main" view. This seems wrong for some of it's other functions.
Communication could be handled by a controller (and possibly even a model) that would hold properties that the toolbar sets and the "listening" view reacts to and resets the value of. This sounds like abuse of the controller and model purposes and like a pretty poor event listener setup.
I could make the drawing library an application global as App.Drawing or something but that does also seems bad. It would also mean that the actions still would not be able to make use of any data in the view to update the drawing library with.
Any suggestions?
What mechanism should I use when communicating between views that are not in a child/parent hierarchy?
In a typical ember application this communication should happen between controllers. Otherwise "Poor Option 2" is on the right track:
Communication could be handled by a controller (and possibly even a model) that would hold properties that the toolbar sets and the "listening" view reacts to and resets the value of.
Consider using two controllers. Toolbar actions will target the ToolbarController, which is responsible for maintaining the toolbar's state and for changing main in response to user action. ToolbarController should declare a dependency on MainController via the needs property. For example:
App.ToolbarController = Ember.Controller.extend({
needs: ['main'],
buttonOneGotAllPressed: function() {
main = this.get('controllers.main');
main.turnOffAnOption();
main.makeSomeOtherChange();
}
});
Now MainController can be focused on the state of MainView. It should not be aware of ToolbarController or it's buttons.
This sounds like abuse of the controller and model purposes and like a pretty poor event listener setup.
Agreed it would likely be an abuse of model purposes but it is exactly what controllers are for.
This is definitely not an event-listener setup, but that does not seem a good fit in your case. The toolbar you describe seems to exist only to interact with the main view, so it makes sense to have a toolbar controller that depends on main and interacts with it directly.
If the components are truly decoupled then an observer (Pub/Sub) pattern might be more appropriate. See How to fire an event to Ember from another framework if that's of interest.