println(
);

Ember is a great framework with a lot of potential and a very sound philosophy behind it but it has one major flaw, the learning curve.

Many, many people have contemplated how to solve this problem and they all have failed for one reason. They are attempting to write the manuals once they already know the material. Now that sounds like the right course of action right? Wrong. People who already get the concepts and get the material often forget exactly where they struggled and because of that guides, tutorials, and instructions often leave out the glue that holds the concepts they are explaining together.

I am currently in the process of climbing the ember learning curve for a work project. Its my first time using a SPA framework and i can honestly say my javascript skills are about as advanced as a 5th graders English.

What i will be attempting to do with this article is write down my experiences, my pitfalls, and the solutions I've found to questions that I've asked and were (or were not) answered along the way. By doing so i hope to build a basis of knowledge that will help some other poor soul answer some of the random questions they've been unable to find answers to or cannot wrap their heads around. Because there are things out there in this framework that have only been mentioned in IRC or in an random blog comment from a core team member 2 years which i assure you are impossible to find on google unless you know exactly what you are looking for.

As a disclaimer i should say that as a beginner in this framework writing down my experiences i should note that some of the solutions i post will actually be incorrect in the long run but i will correct them if needed.

I will try and keep this up to date with additional questions / answers and sections as i progress.

Q and A

Where do i place global level re-opened classes?

I want to add a logger to my application code. Ember.Logger says to override it to add logging functionality.( http://emberjs.com/api/classes/Ember.Logger.html) Where do i do that?

Based on this stack overflow there are multiple solutions: http://stackoverflow.com/questions/27154886/ember-cli-where-to-reopen-framework-classes
But based on this conversation on the ember github from contributors it looks like the folder structure /etx/ https://github.com/stefanpenner/ember-app-kit/issues/485

So i went with /etx/ and then injected the changes into the app.js file
Its also worth noting that i was unable to use reopen or reopenClass on Ember.Logger.

Why can't i .reopen or .reopenClass?

It is because the object doesn't inherit from Ember.Object. A lot of the core classes don't.

Where do i put global level hooks?

If they are idempotent create an intializer and use that as initializers can be run multiple times. If its not idempotent it is much harder to determine the right location.
For instance overriding the Ember.onerror function is idempotent as all i'm doing is defining a function so i placed it inside an initializer.

My array doesn't appear to be updating the attached template {{each}} loop?

That is because the default [].push methods don't work with data-binding. Use "addObject()" instead.

The [] syntax is a wrapper for array / mutable array apparently.
Source: Here

Why did my template suddenly stop rendering?

You misspelled something in the template. Handlebar syntax fails silently which can be very, very, very annoying to diagnose.

I have a declared array but it appears to be shared between all instances instead of per instance, why?

When you declare a property at the top level of a component or controller and set its value what you are doing is setting the default value for the property. This default value is shared between all instances of that object unless it is changed by an instance object. So when you declare an array you are declaring a default object that will be shared. To get around this you should initialize any instance level objects inside an 'init' method. See this article for the issue

How do i add a component programmatically

There seem to be a couple methods for adding components programmatically/dynamically through ember. I found this issue on github that seems to offer a pretty nice solution. Specifically this JSBin in the comments put me on the right path. The code comes down to this

var componentClass = this.container.lookupFactory('component:my.component.path.just.like.in.template');
var componentInstance = componentClass.create({pass in binding options as an object just like you would do if you declared the object in template});
componentInstance.appendTo('what ever dom object this component will live inside');

My model hook isn't being called when i change routes

It seems that if you pass an object to link-to or transitionTo ember will think that is the model you want to use and won't load the model for the route. Instead you need to pass a primitive in order for the dynamic segment to be properly called.

Check out this post that explains it

Model.rollback() is not rolling back the changes to hasMany or belongsTo

This one seems like an utter complete no brainer but it seems the ember-data team is paralyzed by fear.

Say you have an edit form for a location, the location can be a house, business, or a farm. This relationship is expressed by a belongsTo on the location model. You have a dropdown that changes what type of building the location is. Guess what, rollback won't reset that relationship if it changes.

Its all been discussed at length by people who put way too much thought into it over here. What was their conclusion? Do nothing apparently..... There was a mixin that was created that appears to help out a little bit ember-cli-stained-by-children but it seems to me the mixin may become obsolete as ember data changes.

Here is a stack overflow about it BTW.