Ember.js tips

Ember Tips.md

• Do not try to return properties from controllers, return the whole object.
  • Eg: If you want to read a property of the first object of hasMany: do not return elements.firstObject.property. The hasMany are lazily loaded, thus not visible for models/controllers! The correct way is this: return the firstObject as computed property(elements.@each) and in the view bind the property. This way when the collection is lazy loaded, the view is notified and will update.
• Caution with collections in computed properties. You can observe the collection pointer or the collection elements(using @each)! They are different. Observing the collection pointer will notify when the collection is replaced or deleted, but not when an item is added! For this, you need to use @each.
• Displaying multiple model type on the same page is done with render(you can do it also with outlets but less clean).
• Observing a collection in order to apply a JQuery plugin is done using a CollectionView with a function observing content. In the function, do not forget to embed the function in Ember.run.next
• Routing
  • Routes: Routes are named using the parent resource.
  • Resources: Caution as a Index route is automagically created. Don't use FooIndexRoute, use FooRoute.
• Debugger. Place a break point in render: function(name, options)
• Never ever use dot navigation, use get()!
• List all available templates: Ember.TEMPLATES
• List all routes: App.Router.router.recognizer.names
• Nested templates (from nested resources)
  • Nested templates are evaluated from parent to children.
  • So are the corresponding routes
  • Each route should load its own data and should not try to load data for parent templates. They will be loaded as parent templates are executed.
• Views can automagically associated with a template if the have the same name. This way provides an easy way to run custom js code like JQuery plugins around a template. View wraps the template.
• Use the router convention: use nouns for resources and verbs/adjectives for routes. Do not try to do any other way or you will have some weird behaviors.
• Almost everything you do with an #emberjs DS.Model/DS.Store is not a fact(read sync call) but a promise(read async call)!
  • It's fine for inside an Ember app as the UI will recognize promises and update when each promise resolves.
  • It's not fine for outside code, like initializers. Use promise chaining and Ember.RSVP.all(), otherwise feel the wrath of Attempted to handle event XXX on XXX while in state rootState.loaded.created.inFlight. inFlight is the hint!