A context dependent navbar - javascript

I'm trying to build an Android action bar-like navbar in Ember. I would like the action bar to show the route (friendly) name and have context dependant button's on the right side. I came a long way, this jsFiddle will explain things more clearly:
jsFiddle
However, the activate event isn't I am using to figure out when a route has been changed, is only firing when one first visits the route (traversing back up the route tree won't trigger it), thus my context isn't loaded consistently.
What would be the best way to solve this problem? I know the serialize, renderTemplate and setupController fire on every route change, but none of these methods are intended to be used this way. Is there perhaps a way to add a custom event to my routes, that fires on every route change?
On a side note, I am completely new to ember so I may be going about this completely the wrong way, in that case, I am eager to hear a generally better solution, than mine.
UPDATE:
Thanks to kingpin2k's tip I was able to clean up my code a bit, for future reference here's the updated fiddle:
jsFiddle

didTransition/willTransition were created for this reason. In your case didTransition will make the most sense.
actions: {
didTransition: function(){
console.log('level two transition');
},
}
http://jsfiddle.net/FZ29Q/

Related

A-frame, controlling 'hand-controls' with keyboard/mouse

Is this possible?
Since my understanding of aframe and how entity-component system works is severely lacking, i simply tried to call one of the hand methods in the hand-controls component.
// I want to see a grip event
handControllerDOMElementReference.components['hand-controls'].onGripDown()
This achieved nothing. When tracing everything that happens in the 'hand-controls' component it looks like the gestures and animations are all called. But nothing happens, so i'm assuming i'm doing this completely the wrong way.
What is the right approach?
Currently, hand-controls responds to events that some component like oculus-touch-controls or vive-controls emit, see https://github.com/aframevr/aframe/blob/master/src/components/hand-controls.js#L57
It is certainly possible to have other components provide those events, such as
https://github.com/chenzlabs/gearvr-controls
or ryanbetts aframe-daydream-controller-component
Perhaps you can either manually generate those events, or better yet create a component that generates them when applied?

onInit, onAfterRendering not being called when returning back to the page [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have developed two views say View1.xml and View2.xml
In both I implemented onInit() and onAfterRendering(). I also implemented back button where I simply use router.navTo() method.
When I come back from View2 to View1, view1's onInit/onAfterRendering is not called. Same happens even if I press browser's back button.
Please help!
onInit is only and always called exactly once, that's how it is defined! Furthermore, instead of relying on onAfterRendering you should listen for the matched events of the routes, see the navigation and routing tutorial of the SDK! You never know exactly WHEN a view gets rerendered, so make sure you understand when it makes sense to us it, i.e. to modify the DOM after the rerendering has happened or if you need to register third party libs somewhere in the DOM...
I checked it in a sample project. It seems that the first view is not destroyed, just went to the background. When you initiates the back operation, it will just move the first view to the top, without calling the rendering methods.
What do you want to do in the renderer methods?
If you want to make data related changes visible, rerendering is not necessary, as it's done automatically by data binding
If you want to update a control, you can .invalidate() or .rerender() a control directly, which will call the proper lifecycle method of the control. It's much better than rerender the whole view.
To force the rerendering, you can invalidate your view using this.getView().invalidate() or this.getView().rerender() in the navigation event handlers. Be careful to call these two methods only if necessary as it affects the performance of your website.
Please try this piece of code in the oninit() as shown below:
onInit: function() {
this.getView().addEventDelegate({
onBeforeShow:function(evt)
{
alert("Hi U came to init function");
}
})
},
hope this will work.
Please check it and let me know if it works.
Thanks,
Deepak Raj.

Nested Views in Angular UI-Router Lag During State Change

I have a parent view with a nested view in the middle.
On a state change, the nested view seems to stick for a second or two before loading the next state. It's as though the nested view is lagging behind or something.
For example, after logging in, the login form is still visible for a second or two in the middle of the page after the state change. The parent view changes instantly, but that nested view just seems to stick.
I've been pretty careful about items on the watch list, and use one-time binding wherever possible.
But I really don't think it has to do with that, because this happens even early on in the application (from login to the main page), and other than this issue, application performance is fine.
I've googled a lot about this, but haven't turned up anything useful.
Any ideas on what to check or how to debug this?
You say it only happens the first time you transition after loading the app. So it could be you are injecting a service into the child view that you are using the first time in your app. This service is taking some time to instanciante. Servises are singletons, so this lag is only visible the first time.
Look at the answer in this thread for a possible solution, somebody had the exact some problem:
How to instantiate a service dynamically?.
Another solution might me to inject that service into the parent view as well, so you get the lag while loading the app not on first transition.

Backbone.js: view states and routes

I'm thinking about the optimal way to structure my Backbone application. The problem is that I have various complex states, each made by some views showing while all the others are hidden.
What is the canonical way to handle this in Backbone? Two things that I've thought are either controlling the state by the router (calling views hide / show methods) or making the views listen for route event.
The problem with the first method is that the router must be aware of all the views existing in the application.
The problem with this second solution is that I have to make all the views listen to all the events and hide for any of them but a couple that make them show.
Thanks for pointing me to a lean solution.
I use a FSM machine to change the state of the application. Each states shows and hides the appropriate view. My views use transition to animate in and out, so changing the state is more complex, then simple show/hide - it animates in and out from one state into another. I have forked https://github.com/fschaefer/Stately.js to fit my needs.
I can share my personal experience with such a problem. I don't know if it's the best solution, but it worked for me.
My problem was even worse because I had several routers and each of them should hide/show views that belong to it. The solution I chose was similar to the first option you consider.
In my router there is an array which holds all existing views. When the state changes and route callback executes all other views are hidden with this simple code view[i].hide() and the proper one is shown. You can make View model and Views collection if you would like to have more control.
I think it's a better solution, because when you add a new route, you don't have to add route events to all views. Moreover, your views stay decoupled from the router, they may even don't know it exists.

Javascript FSM Possibilities / Idea

So I have been making stuff in Unity3D and decided to try an extension called Playmaker. Basically is uses a FSM (Finite State Machine) to design the flow of states and events. You can drag an event to a different state to trigger another state of events, etc. (Reference : http://www.hutonggames.com/features.html)
NOTE : The actual product I linked has nothing to do with the idea I want to try and build. Just a reference.
Well I would love to be able to do something simliar in Javascript. I think I have some of the logic down but I'm thinking more about User Experience. I want a user to be able to create an FSM with my logic in the browser using Javascript.
I'm not asking for anyone to code this for me or anything as I am experienced enough in javascript to do the bulk of it. I was thinking more about the way you can drag one event to another and it creates a visual arrow showing the user what events are connected. If you look at the first tutorial on the referenced link I provided you will understand what I mean. The arrow length and curves would be dynamic. Possibly be able to drag around states to re organize the layout of the states. This would obviously change the way the arrows pointed as well.
I hope that all made sense.
Ideas? Pointers? Maybe someone has done something like this already? I did find one Javascript State Machine but it generates once, doesn't allow users to move anything, the event dragging to another state is very important.

Categories