I should start by saying that I'm a complete Ember.js noob (and MVC JavaScript Framework noob in general).
I'm trying to figure out how the Router and StateManager work together. I've cobbled together an example from various places on the interwebs, you can view it here:
http://jsfiddle.net/zdfs/qsAxZ/1/
So everything on first load seems like it's working. But there are pieces of the function that don't seem to be behaving properly. I want the CSS classes that I attach via the action links to actually be a part of the application state, but I have something messed up somewhere.
You can duplicate the problem by clicking "webcam" or "screensharing". The link will highlight. When I reload the page, the state is correct, but the highlight is lost. I'm doing something incorrectly, but I don't know how to fix it.
If I try to move the actions into the StateManager, then the router.get("applicationController") reference is lost.
I also can't do something like sManager.send("goHome"); - problems occur.
Some remarks after reading your code:
Is there a reason why you did split your code between a Router & a StateManager? In the current canonical form, your states should be classes of Ember.State, located inside the router.
The connectOutlet method should be called from the connectOutlets state's hook, not the enter one.
The event handlers in the router get the router instance in first parameter, not a state (cf. goHome, viewWebcam & viewScreen)
Related
I know this question might seem a little duplicate but the other version of this question is old and some of the content (such as Views) aren't even a part of ember anymore.
I'm about 4 weeks into my internship as a front-end developer working with EmberJS. I still don't understand when it's better to use the route over the controller or vice-versa. It seems to me that every action in the route can also be used in the controller.
The one recent thing I heard was that ember routes should be stateless where as controllers should be stateful.
What is the current state of controllers and routes. When should one be used over the other?
Consider the following example to understand the state of a controller (or route, or anything), in simple terms and in current context -- lets say you have a page (like a form) with three tabs; each tab can be considered as a state - it would call different components based on the state (or the tab you are in). Now if you would happen to go back for some reason, and hit the form link again, you would see that the state would remain the same. (if you were on tab 2 when you hit back, on returning to the form, you would still be on tab 2).
So to maintain these states, controllers are the way to go, since they are singletons. Route would have lost that information, and started fresh. So basically your variables/objects in a controller would define the 'state'.
Route-actions can be as easily used as controller actions- see https://github.com/DockYard/ember-route-action-helper. So if your template for this route is just using model as the object directly, and you don't need to maintain the 'state', you can pretty much do without your controller.
But if your template was using variables which needed manipulation, you would need controller.
Hope this helps!
I'm trying to figure out why an Ember component is not working (and trying to learn about component lifecycles in the process). The component in question is Ember-cli-mapbox. It uses nested components. You can have a mapbox-map component, and within that component you can have several mapbox-marker components. Now, how it is supposed to work, is the mapbox-map component initialises the map, and then passes a block to the child marker components. The child marker components then references the map that got passed down to them. An example of the components in use (which come from the component docs):
{{#mapbox-map mapId='ember-cli-mapbox.7c3914f2' as |map|}}
{{#each positions as |position|}}
{{mapbox-marker map=map coordinates=position.coordinates}}
{{/each}}
{{/mapbox-map}}
Now, the components get set up using the didInsertElement hook, which makes sense to me since the DOM needs to be in place before the mapbox-map component can bind to a element in the dom. It doesn't work like that though. The didInsertElement of the child components get executed before the didInsertElement hook in the parent component. So, the marker tries to reference the map before it was created. I figured this out by putting console.logs in the component init code. I can't find much documentation on component lifecycles. didInsertElement does get referenced in the API docs here, but it seems that the newest API docs are actually out of date and don't reference a bunch of other hooks described here. The latter link says that life cycle events happen in the following order:
didInitAttrs
didReceiveAttrs
willRender
didInsertElement
didRender
Now, things get weird. When I replace didInsertElement in the components with didInitAttrs, it fires in the correct order. The didInitAttrs hook on the parent component fires first, followed by the child component didInitAttrs hooks. Problem with this is, the DOM isn't ready yet, so it doesn't help much. I also can't put the map binding event in the Ember runloop, since it need to be returned and passed as a block to the child elements.
So, my questions are:
Why, when using didInsertElement on components, do the hooks get executed in the order they do? (children, then parents)
How did this component ever work in the way it's currently written?
Am I supposed to use the above mentioned hooks if they're not mentioned in the official API docs?
I've recreated the addon in an Ember Twiddle here. Child hooks get called before the parent hooks, causing the component to break since map is undefined when the hook is called. This happens on Ember 1.13.8 as well as 1.13.9.
Why, when using didInsertElement on components, do the hooks get
executed in the order they do? (children, then parents)
This was changed in version 1.8. It was previously parent, then children but this often required people to use some complicated method of waiting for children to render to do certain things. Changing the order made learning Ember simpler.
See https://github.com/emberjs/ember.js/issues/5631 for more information.
How did this component ever work in the way it's currently written?
I have not used this addon, and have no idea if it works or not. I fixed your twiddle to work, however: http://ember-twiddle.com/4c3e55d0a66ead378bdf
Am I supposed to use the above mentioned hooks if they're not
mentioned in the official API docs?
These hooks are not mentioned because the documentation is still catching up to changes in Ember. Feel free to use them if you'd like.
Scenario:
You have something like a wizard. The user completes something on the first page, click next and go to second page and so on until he reaches the last page. Here he clicks finish and all his input is stored and persisted using an ember model.
There are two other questions similar to this one:
Ember.js wizard control
Multi-step form (or multiple "pages") in one route using Ember.js
At first I've tried with a route/controller/view for each step, but since the answers are basically a controller's state variables and get lost while transitioning, it is obvious that it cannot work like this!
Then I took the approach described in the above links. One route, one controller, one template with lots of {{#if }} so that I show only the fields of the current step. I think I might improve this by using partials and so each step will have its own template.
The question is: is this the only/the best approach? Does anyone figured out a better way to implement such a flow?
If you make each wizard page a component and then pass the model as a template parameter to each component, you get a pretty nice workflow. The URL is stable (not constantly adding junk onto the end in order to pass state around); it's easy to drop the user into the first step whenever they enter the route (such as manually inputing the URL or perhaps more importantly, finishing the wizard and then hitting the browser's back button); and you can perform validation on each page of the wizard.
Check out my longer answer here
One of the possible approaches would be using Query Parameters so that you can manage a state of each step in a single wizard controller.
I'm looking for a way to get multiple independent routes, managed by the url in Ember.js. The Goal is, to get a Page that shows Persondata and Personrelated data on the Same Page. Here is a Mockup I created for better understanding:
https://www.dropbox.com/s/carcorg1ox0qjgd/Mockup.png (not enough reputation to post images, sry!)
I imagine a Start-URL like:
"#/person/123/Persondetails/Audi/Vehicledetails"
The Idea is, that I can change from Persondetails to Adresses without affecting the Bottom Part of Vehicledetails. The new URL should look like:
"#/person/123/Adresses/Audi/Vehicledetails"
And vice versa, changing from Vehicledetails to Engine, but stay on the Adresses route for Persondetails. The new URL should look like:
"#/person/123/Adresses/Audi/Engine"
I've already found an interesting thread to start with, but it shows only level of the dynamic Part of Routes. I'm experimenting with the router for a few days now and feel kinda stuck. Is it even possible to acchieve what I want with Ember?
I'd be very grateful for every little hint you can give me!
Unfortunately the router doesn't support this type of architecture.
It's possible someday you could hack it in with query-string params, but you'll lose a lot of the built in functionality going this route.
Ember routing design. Desktop like routes
Total Noob question here. My apologies for the simplicity, and I've skimmed hundreds of Ember-tagged posts here looking for an answer. But it appears to be too primitive for anyone to have bothered asking before...
I'm starting from scratch with Ember. I did Andy Matthews' EmberTweets tutorial, which worked fine. I'm trying to use that as a basis for my first Ember app, which is painfully simple; but I'm stuck on the most basic of steps. I appear to have a functioning controller, and am seemingly adding new objects to it successfully. But I cannot for the life of me get my view to render the properties of those objects. The basic view renders out, but not the data from the controller, which I'm just trying to access with a simple #each. I get no errors in any browser console.
Fiddle is here.
I've tried adding objects to the controller in three different ways in my example, to see if that helps. I can successfully access from the console the properties of the objects by inspecting the content array, or with something like FilterMenus.MenusController.content.objectAt(2).get('menu_name'). Apparently, the data is right where it's supposed to be.
But still nothing appears in my template when I try to render out any of the properties, such as: {{menu_name}}. What am I doing wrong, please?
As stated in the other answers, you have to declare your app as a global variable (by omitting the var).
Besides that, you are not calling this._super() inside your FilterMenus.menusController's init method. This is required to setup the Ember.ArrayController correctly, so modifying the content will work.
Besides these two issues, your code looks fine. Here's a working fiddle: http://jsfiddle.net/pangratz666/HPkHt/.
It seems like Ember's big problem with your code is that your Application is defined as a var so it can't be accessed from the template. Removing the var keyword helped.
For some reason though, that wasn't quite enough and I had to add a
this.set('content', []);
as the first line of your init function to get it to work. I've never had to do this before so I'm not sure if it's jsFiddle doing something. If anyone has some light to shed on this, I'd be keen to hear it.
Try the following:
Remove "var" from FilterMenus declaration:
FilterMenus = Em.Application.create();
Change the implementation of menusController.addMenu to be:
addMenu: function(menu) {
this.content.push(menu);
},
This got me the two menu names to show up after "Select Country" and the explanatory paragraph:
countries
countries2
Ember didn't seem to know what this.pushObject(menu); was. Pushing directly to the controller's content array will always work, though.