Correct way to do this in emberjs - javascript

So should the click action goto a method on the router say 'showPropertyPanel' and that puts the router in a showProperties state on this page show route?
Then setup the properties outlet.
Is this correct?
Problem is I don’t want the route to change from /pages/1234 to /pages/1234/showproperties
Is this the correct way to do this now all actions through the router to change state? Can you have states with and without routes mixed in together?
Before I would just fire an event on the PageView to create the Properties Panel and show it etc.
Please can someone give me some help on this as I am sure I am not the only on struggling with this at the moment?

Your event handler, on the state, does not have to go to a new state to show the panel. It can, but it doesn't have to. It's sort of an architectural decision on how to handle such things. If complicated things can happen when the panel is up, you might want a new state, to handle all the events that can originate from the Panel.
On the other hand, you can do what you were doing before, but do it in the router instead of directly on the view.
With respect to the route issue, can't you just do
route: "/",
on the panel state to keep it the same as it was before?

Related

Ngrx update reducer if component is on the page

I have two components on a page, an update user form and a history of events. They are represented by two reducers (user and events). I want to update the list of events in the store (by calling an API) once once the user has been updated. However, the events should only be updated if the events component is on the page.
What's the best way to achieve this? The only solution I like the idea of is to have a success handler in a parent of the form / event components which dispatches an action which is caught by an effect which will then refresh the list of events. I was hoping this is something I could achieve entirely with effects but I obviously don't know if the component Is on the page and I also need access to route params. Does anyone have any better solutions or can see an issue with this solution?
Typically, the fact that the Events component is shown on the screen represents some sort of part of the "business logic/process" which is likely already represented in the store state. If it is not the case, you seem to need to add it in some way and update it when your events component initializes (ngOnInit) and is destroyed (ngOnDestroy).
Once it is part of the store, you can use it as part of the effect.

Angular & Ionic State Change and history

I'm quite new to AngularJS as well as Ionic. Was wondering if anyone could help me figure out how to set a certain history before a state change?
Currently I have $state.go('app.lineup',{ 'lineupId': navURLID}); and I want to point the back button to 'app.lineups' which is the parent for the 'app.lineup' page.
Everything in my code works well however when I redirect a user to another state the back button returns me to the state I sent them from and not the parent state that I need to send them to?
Any help (even in the form of internet references wink) will be greatly appreciated :).
Thanks a mil!
one way to do it is to not make the parent state as abstract, let it actually resolve the route and in the parent states controller redirect to the desired child something like
$state.go('parent',{child:'childname'})
where child is not a param but a search param, and from inside the parents controller you do
$state.go('parent.'+search.child,{any: param})
that way you'll always go through the parent state first.
other solution would be to use replace or you can also use the replace property of the options object in the $state.go function
https://github.com/angular-ui/ui-router/wiki/Quick-Reference
it depends on your structure.

Iron Router hook on a route before actually changing the template

i am trying to show the user a payment popup as soon as he clicks on a payed object.
But after he pays he should directly enter the content he clicked on.
Therefore i think its a good solution to solve this with the router, because i want every link on the page that redirects to this content to show this popup.
My problem is i want to show the popup before redirecting the user.
So i tryed the onBeforeAction hook and stuff but everything working with the iron router seems to only hook in after the URL of the browser changed and the current template was unloaded.
Do you have an idea how to get this kind of behavior?
Cheers
Based on this answer, here is how you can hook the router using Router.onStop():
// onStop hook is executed whenever we LEAVE a route
Router.onStop(function(){
//check if the current route is the page from where you need to show your
//popup and show it based on, for instance, a session variable containing
//the previously clicked content id.
});
It's a common use case that I don't think is directly achievable within the iron router framework at present (although I would be delighted to be corrected!). As you've discovered, onBeforeAction is run before the page has rendered but after the new route has been run, so the old page has already disappeared.
Effectively, you're looking to queue the running of a new route until a certain action has been completed. The use case for which I've experienced this requirement is page transitions, for which the best solution appears to be to do completely the opposite of what you propose: i.e. to add the logic to an event attached to the link, and only redirect to the new route once that logic has been satisfactorily completed (i.e. the popup has been closed in your case).
I agree that doing something in the router would be a sensible way to approach this, but I'm not sure it's possible in iron router as things stand. Note that this has already been raised though!
Will this workshop?
'unload - runs just once when you leave the route for a new route.'
From
https://github.com/EventedMind/iron-router/blob/devel/DOCS.md#unload-hook

How to handle action "sent" by Ember component in wrapping view or view's controller?

I'm learning Ember and got into an issue I can't seem to find a solution for: I got a view that contains a component and that component handles a button click. I want to "send" that action to the wrapping view and handle it there if possible. That'd be the preferred way. If not possible, then handling it in the view's controller is OK too.
But I can't seem to catch that action anywhere, not even in the current route or the route's controller. I don't know where the action is being sent to, I thought I'd be able to handle it in the current context's controller but it seems that is not the case.
Here is a fiddle that illustrates my issue:
http://emberjs.jsbin.com/juzif/1/edit
I get the action inside the component, but the sendAction doesn't seem to do much.
What am I doing wrong?
I still haven't seen any solution of how to target the view from the component, but for the controller->route etc you need only define where the action need be sent to from the component (this is super helpful when you have the component in a particular controller/routes scope and you want it to be handled differently based on the interaction of each component, or if you want to ignore it, which is currently what's happening for you)
{{foo-bar blah=view.foo dataUpdated='dataUpdated'}}
or better said
{{foo-bar blah=view.foo internalAction='externalAction'}}
http://emberjs.jsbin.com/misiyaki/1/edit
Additional answer responding to "I still haven't seen any solution of how to target the view from the component":
The magic word here is targetObject:
{{foo-bar action='actionName' targetObject=view}}
This also works in each loops targeting an itemController like so:
{{#echo posts itemController="post" as |p|}}
{{foo-bar action='actionName' targetObject=p }}
{{/each}}
taken from #jasonmit´s answer here:
How to send an action from a Ember component to a View that wraps it?

How to better organize multi-views in a web single page app?

Assume I have a lot of views in my single page app. It means, I put some view inside a div and show this or that view depending on user's actions. So, I usually show on view at a time. For example, I have these views - dashboard, settings, entries, entry details.
Depending on current state of the app one of these views is visible and others aren't. When I go this way dashboard > entries > entry details, then edit some entry details and click save or back button, I want the app to go back to entries. But if I have a link on dashboard that, for example goes to the latest edited entry, I can go this way dashboard > entry details, and in this case I want to get back to the dashboard by clicking save or back button.
This case can become even more complex with deeper views paths. Right now I manage it like this - When a button responsible for views switching is clicked, the variable state is being changed to something like from_dashboard_to_entries. I listen for that variable to change, then do all the view switching from another function depending on the state variable value. This way I have to manually define all possible scenarios and test all the possible combinations of cases. Right now this approach works quite well, but I am worried about deeper, or longer views sequences.
My idea is to somehow create a history of views in an array or something but I am not clearly understand how to do it better.
Please share your thoughts how you would organize this.
Simply don't worry about the source view - you don't have to know it to change to the destination view. If you want a history, instead of manually storing it, consider using the HTML5 History API, preferably with a wrapper library (e.g. History.js).
Rather, We should be setting the view while changing the state of application. This may optimize the initial app launch time by not loading all the views at launch and will give a way for on-demand loading.

Categories

Resources