Skip to content
Menu
Justin Ball
  • About
  • Privacy Policy
Justin Ball

Building with Ember

Posted on August 1, 2013October 25, 2021

We’re currently building a couple of projects for a group at MIT and for a current Techstars company in the Kaplan program which has given us a chance to try out ember.js on real projects.
Ember is an incredible framework started by two really smart guys Yehuda Katz Tom Dale. It’s new and it’s hot which also means that it’s still a bit rough around the edges. However,
once you get past a few of the gotchas it’s an amazing framework that saves you a lot of time.

So far programming with ember.js has been a great experience. Here’s a few notes/issues that I’ve run into in case this helps someone else:

Be careful what event names you chose inside of your actions.

This one drove me crazy for quite a while. I had the following action setup in a view:


    <a href="#" {{action 'destroy'}} class="btn">Delete</a>
  </pre>

I wanted the action to bubble up to the route. However, when I clicked on the link nothing happened. That was confusing so I added a 'destroy' method to my controller. I really wanted to handle the event in the route not the controller so I spent way to much time trying to hack around things to no avail. The really strange thing was that ember.js will complain if you don't handle your events. Deleting my event handler from the controller and from the route didn't yield an error. That's when I realized the route handles the 'destroy' event. I changed my code to the following and it all worked:


    <a href="#" {{action 'destroy_node'}} class="btn">Delete</a>
  </pre>

Now I have a destroy_node event handler in my route and everything is happy.

I remember going through the same struggle years again when I first learned Ruby on Rails. 'destroy' is a great name for an event which is probably why Ember uses it. With any framework you have to be careful about naming your events, methods and variables. There might be some documentation on reserved words but I've not come across it. This is one of the gray areas where time and experience will give you a "feel" for the framework.

Set an explicit controller inside your ember routes.

Here's another one that should be easy to do, but as it turns out I couldn't find any documentation. Ember does a lot of magical things for you which is great. However, sometimes you need to work around the magic. You will feel some pain when that time comes. I ended up reading the code to figure out that you can explicity set the controller for your route. This should be simple and it is but it should also be spelled out in the documentation. Here you go:


var ThingEditRoute = Ember.Route.extend({
  controllerName: 'thing',
  renderTemplate: function(controller, model){
    // You have to pass the controller to render or it will generate a new controller
    this.render({ controller: controller, into: 'application', outlet: 'modal' });
  }
});
</pre>

Now you'd think that just setting the controllerName would be enough, but you'd be wrong. If you also call renderTemplate you MUST pass in the controller or else ember will build you a new one. Why I don't know, but event handlers my 'thing' controller were never called by actions in the view.

Ember Select doesn't work

Well it sort of doesn't work. We're using ember-tools which uses an older version of handlebars. Unless you are using handlebars 1.0.0 you will get 'Uncaught TypeError: Object #&lt;Object&gt; has no method 'merge'. We're using Ember Tools in the MIT projects and it turns out that Ember Tools is stuck on an older version of handlebars. I did try to update but ran into some issues. For that reason we switched over to the ember-rails gem for our latest project. I really like the default application structure that Ember Tools generates, but it was more important that we were able to get the latest working code without having to dig into the tools and make a bunch of changes.

That super awesome ember.js tutorial is probably out of date.

Ember is moving fast which is great, but it also means that everything is subject to change. Just be careful to check the date on any Ember.js tutorial you come across. If it's not from the past few months then you might want to keep looking since things have likely changed.

Error messages and debugging are painful.

The magic that powers ember.js is awesome while it is working. When it fails though you will have a lot of 'fun' debugging it.

We have a number of transitions in the application. At one point we do this:


var map = MapModel.createRecord({
  title: 'New Map'
});
map.save().then(function(){
  this.transitionTo('map', map);
}.bind(this));
</pre>

That code looks like it should just work but the console would fill with errors like this:

Assertion failed: Cannot call get with 'id' on an undefined object. application.js?body=1:16925 Uncaught TypeError: Cannot read property '__ember1375726885234_meta' of undefined

I debugged down into the code. I put console.log all over. I got no where. Then I realized that in the past and in other routes when I call transitionTo I was relying on the fact that the current transition would automatically abort. However, in the case of the code above the transitionTo wasn't called until the promise completed. The result was the completion of an invalid transition followed almost immediately by a second transition that totally confused the router. Calling "transition.abort();" before the code above solved the problem. This was a total newb mistake, but it illustrates how debugging in the world of Ember.js can be painful.

In another instance I started seeing an error that looked pretty much like the error above:

Assertion failed: Cannot call get with 'id' on an undefined object. application.js?body=1:17079 Uncaught TypeError: Cannot read property '__ember1375989556474_meta' of undefined application.js?body=1:18391 Trying to get configured shortcut getDocumentSelection.js:51 Assertion failed: Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications.

This time I thought I was prepared having seen the error before. Turns out that in this case previous knowledge was a hinderance rather than a help. In desperation I started deleting code from my templates since I had read that others had run into problems with their handlebars code. I lucked out and that was the solution. I had a link in my main code that looks like this:


  
  • {{#linkTo 'map.destroy' title="Delete the current map"}} Delete{{/linkTo}}
  • </pre>

    That code looks innocent but 'map' isn't always defined which causes the assertion failure above. I realize that I ember isn't to blame for my stupid mistake, but when you are learning a new framework errors like the one above are extremely confusing. They don't really point to a specific piece of code so they are difficult to debug. Try asking a question on Stackoverflow or IRC to resolve the problem. Generating a jsbin is almost impossible since the error can live anywhere in your code. You are on your own in these cases. Basically try deleting some code and see if it goes away. If you are lucky you can narrow down the problem that way until you locate the real culrpit.

    And yet again in a totally different situation I get a similar error:

    Assertion failed: Cannot call get with 'id' on an undefined object. ember.js?body=1:364 Uncaught TypeError: Cannot read property '__ember1377186615643_meta' of undefined ember.js?body=1:1676 Assertion failed: Emptying a view in the inBuffer state is not allowed and should not happen under normal circumstances. Most likely there is a bug in your application. This may be due to excessive property change notifications. ember.js?body=1:364 Uncaught Error: You cannot modify child views while in the inBuffer state ember.js?body=1:18835

    My favorite part is "Most likely there is a bug in your application". In case the fact that nothing was rendered on the page didn't clue me in I also need ember to tell me I'm an idiot. I'd be OK with that if it gave me some hints as to how/where I was being stupid, but it doesn't. I get an error that basically says go look through your code and figure it out.

    This time around here's the problem (again newb mistake, but give us new guys some hints/helps).

    Had previously built a loop in my handlebars like this and it worked fine:

    
      {{#each user.posts}}
        
  • {{#linkTo 'posts.show' title="View post"}}{{name}}{{/linkTo}}
  • {{/each}} </pre>

    I then tried this in a different bit of code and got the error:

    
      {{#each post in Posts}}
        {{#linkTo 'posts.show' title="View post"}}{{post.name}}{{/linkTo}}
      {{/each}}
    
    </pre>
    
    

    If you've spent much time with ember/handlebars the error isn't hard to spot but it threw me. It would be awesome if the error messages would direct you to the point of stupidity. The only difference in the working code below is the addition of 'post' after 'posts.show'. In the first loop above the context is the post. In the second loop the context remains the parent context. In the first case we just link to 'this' since we've changed contexts. In the second loop we have to tell the linkTo the correct thing to link to:

    
      {{#each post in Posts}}
        {{#linkTo 'posts.show' post title="View post"}}{{post.name}}{{/linkTo}}
      {{/each}}
    
    </pre>
    
    

    There's a lot of whine in the list above along with a lot of newbie mistakes. Ember is still pre-release, but don't let that scare you off. If you can work through the intial learning curve it's going to save you a lot of time.

    Other Stuff

    Here's another post Mortem blog post for ember.js

    The guys in the emberjs irc room on freenode are awesome. If you have questions they will make you believe in the goodness of programmers everywhere.

    Leave a Reply Cancel reply

    You must be logged in to post a comment.

    Recent Posts

    • Around and Back to WordPress
    • Last Lagoon (This Year)
    • Logan Sunset
    • Grami Del
    • FanX (and Lagoon)

    Recent Comments

    1. jquery ajax readystate 0 responsetext status 0 statustext error – w3toppers.com on jqXHR Returning Readystate 0 and Status 0?
    2. Change MySQL default character set to UTF-8 in my.cnf? on Upgrade to MySQL 5.5.12 and now MySQL won’t start
    3. Around and Back to WordPress – Justin Ball on Gatsby 2.0 and Forestry
    4. More Stuff You Shouldn’t Hit on a Bike – Justin Ball on Why Cyclists Shave Their Legs. The Most Disgusting Post I Will Ever Make
    5. First Real Ride on the New Trek Madone 6.9 – Justin Ball on Rode Blacksmith Fork Canyon Tonight

    Archives

    • November 2021
    • October 2021
    • September 2021
    • January 2020
    • February 2018
    • January 2018
    • December 2017
    • November 2017
    • October 2017
    • February 2017
    • November 2016
    • September 2016
    • August 2016
    • May 2016
    • March 2016
    • February 2016
    • November 2015
    • September 2015
    • June 2015
    • May 2015
    • February 2015
    • January 2015
    • October 2014
    • September 2014
    • July 2014
    • June 2014
    • May 2014
    • April 2014
    • March 2014
    • February 2014
    • January 2014
    • December 2013
    • October 2013
    • September 2013
    • August 2013
    • June 2013
    • May 2013
    • April 2013
    • February 2013
    • January 2013
    • December 2012
    • October 2012
    • September 2012
    • June 2012
    • January 2012
    • December 2011
    • September 2011
    • August 2011
    • July 2011
    • June 2011
    • May 2011
    • March 2011
    • February 2011
    • January 2011
    • December 2010
    • November 2010
    • September 2010
    • August 2010
    • July 2010
    • June 2010
    • May 2010
    • March 2010
    • February 2010
    • January 2010
    • December 2009
    • November 2009
    • October 2009
    • September 2009
    • August 2009
    • July 2009
    • June 2009
    • May 2009
    • April 2009
    • March 2009
    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • September 2008
    • August 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • March 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • October 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • March 2007
    • February 2007
    • January 2007
    • December 2006
    • November 2006
    • October 2006
    • September 2006
    • August 2006
    • July 2006
    • June 2006
    • May 2006
    • April 2006
    • March 2006
    • December 2005
    • November 2005
    • October 2005
    • September 2005

    Categories

    • 2.3.2
    • 3g
    • 3tera
    • 420
    • 51weeks
    • 64bit
    • accessibility
    • ActionView::MissingTemplate
    • activemerchant
    • ActiveRecord
    • activesalesforce
    • acts as taggable
    • acts_as_facebook_user
    • acts_as_nested_set
    • acts_as_state_machine
    • advertising
    • Affiliate Marketing
    • air quality
    • ajax
    • Alyssa
    • ama
    • amazon
    • amazon s3
    • amazon wishlist
    • amazon.com
    • ancestry
    • animal cookies
    • antshares
    • apache
    • API
    • apis
    • apollo
    • apollo client
    • apple
    • Apple Store
    • Apple Time Capsule
    • application
    • applications
    • Art
    • ASP.Net
    • assert_sent_email
    • asyncronous processing
    • Atomic Jolt
    • Aubrey
    • Authentication
    • authorize.net
    • Autumn
    • babelphish
    • back problems
    • backbone.js
    • backup software
    • backups
    • bacon
    • Battlestar Galactica
    • big companies
    • birthday.
    • bitcoin
    • black cherry vanilla coke
    • Black Smith Fork Canyon
    • blockchain
    • blog
    • Blogging
    • bluehost
    • books
    • BoomStartup
    • bread
    • buddypress
    • bug
    • bugs
    • business
    • business. mother's animal cookies
    • cache county
    • cache valley
    • California
    • Cancun
    • canvas
    • capistrano
    • Catholic Church
    • cereal
    • chauvet obey 40
    • checkbox list
    • checkboxes
    • chess
    • Chicago
    • china
    • chocolate
    • Christmas
    • Chrome
    • church
    • Cinderella
    • Cisco
    • cloud computing
    • cms
    • code generation
    • code sprint
    • coke
    • Comcast
    • commerce
    • Common Lisp
    • communities
    • Community
    • complex
    • Computers
    • conference
    • conference software
    • configuration
    • consulting
    • cookies
    • cooking
    • COSL
    • cosmos
    • count
    • courts
    • cows
    • create
    • creative commons
    • cryptocurrencies
    • cryptography
    • css animations
    • cucumber
    • currency
    • Cycling
    • database
    • dataloader
    • date
    • death
    • death ray
    • debugging
    • decentralized applications
    • dell dimension 8400
    • democray
    • deployment
    • developing
    • development
    • Devin
    • diet
    • digg
    • Digital Ocean
    • digital-photography
    • disease
    • disguise
    • disgusting
    • disney
    • disneyland
    • DiSo
    • disposable
    • DMX
    • Docker
    • domain name
    • domains
    • doom
    • dr strangelove
    • driving
    • Dryers
    • DVI
    • ec2
    • economics
    • economy
    • ecto
    • edge rails
    • Education
    • EFF
    • Egypt
    • ElasticSearch
    • elastra
    • elections
    • elixir
    • email
    • Ember
    • Ember.js
    • encoding
    • energy
    • engine yard
    • engines testing
    • engineyard
    • enterprise
    • epp
    • error
    • errors
    • ethereum
    • Event Machine
    • expercom
    • facebook
    • failure
    • Family
    • family history
    • family reunion
    • family search
    • family trip
    • Family Vacation
    • familysearch
    • familysearch.org
    • farmers market
    • fashion
    • fences
    • field trip
    • file uploads
    • Firebase
    • fireeagle
    • fix
    • flat tax
    • flowers
    • folksonomy
    • food
    • France iPad Internet access
    • free book
    • freedom
    • friendfeed
    • friends
    • fuel
    • Fun Stuff
    • funeral
    • Funny
    • funny kids
    • gadgets
    • galleries
    • gamenight
    • garden
    • gardens
    • garter snake
    • gatsby
    • gatsbyjs
    • gearsynper
    • geek
    • gelatin
    • gem
    • gems
    • gems ruby on rails
    • genealogy
    • genius
    • geocaching
    • geotagging
    • girl's camp
    • gistr
    • git
    • github
    • global
    • gmail
    • godaddy
    • Goliath
    • Google
    • google bomb
    • google docs
    • google hacks
    • Gorden B Hinckley
    • government
    • gps
    • grand master
    • grand-teton-national-park
    • graph ql
    • graphcool
    • graphql
    • graphqlsummit
    • great firewall
    • grocery
    • gross
    • group work
    • HABTM
    • Hacks
    • halloween
    • happy
    • has and belongs to many
    • has_many
    • hashgraph
    • Hawaii
    • health
    • health insurance
    • heirachy
    • Heirarchies
    • helps
    • Heroku
    • Holiday
    • home building
    • home improvement
    • home plans
    • homebrew
    • homework
    • hosting
    • house plans
    • House Stuff
    • housing
    • human rights
    • hyperledger
    • i18n
    • ice cream
    • icls2008
    • idaho
    • ideas
    • identity
    • identity_theft
    • iiw2006b
    • image
    • image processing
    • inbox
    • induglences
    • insane
    • inspiration
    • install
    • Instructure
    • Interesting
    • internet
    • Internet Explorer
    • InvalidAuthenticityToken
    • iPhone
    • jackson-hole
    • jamis buck
    • Javascript
    • JavaScript (Programming Language)
    • Javscript
    • Jenna
    • jeweler
    • jobs
    • joyent
    • jQuery
    • jungle disk
    • jurlp
    • justin ball
    • kids
    • knowledge workers
    • lambad
    • laptop case
    • launchup.org
    • lds
    • LDS church
    • learning
    • legal
    • Lego
    • legos
    • leopard
    • lesson
    • Levi Leipheimer
    • Liahona
    • library
    • life
    • lifestream
    • Links
    • litecoin
    • LMS
    • loans
    • localization
    • logan
    • Logan Canyon
    • logistics
    • logitech
    • LTI
    • lucene
    • lucene.net
    • Lucifer
    • luvfoo
    • mac
    • Mac OSX 10.6
    • Mac Ports
    • macbook
    • macbook pro
    • Maker
    • Maker Faire
    • manage
    • marginal changes
    • marion
    • marriage
    • Matt Mullenweg
    • me
    • medicine
    • Meetings
    • merb
    • Mexico
    • micro-blogging
    • microcontent
    • microformats
    • Microsoft
    • Middle East
    • migrations
    • mom
    • money
    • Monitor
    • morph
    • morph exchange
    • morphexchange
    • mortgage
    • mosso
    • motorcycle
    • mountain biking
    • Mountain West Javascript
    • Mountain West Ruby
    • mountain west ruby conference
    • mountainwestrubyconf
    • mozy
    • MRI
    • mtnwestrubyconf
    • muck
    • multi-user
    • music
    • mwjs
    • mwrc
    • mysql
    • mysql gem
    • MYTecC
    • Neat Stuff
    • neighbors
    • newgem
    • No Programming
    • node.js
    • nuclear weapons
    • nutcracker
    • Oahu
    • Oauth
    • oauth-plugin
    • Obama
    • Obie Fernandez
    • OER
    • OER Glue
    • olympic torch
    • olympics
    • omniauth
    • Open Assessments
    • open source
    • OpenContent
    • opened2007
    • OpenID
    • opensocial
    • optimism
    • ordered tree
    • oreos
    • osx
    • outdoors
    • outsourcing
    • ozmozr
    • pain
    • panasonic plasma
    • Paris
    • password recovery
    • payday lenders
    • paypal
    • pety
    • PGP
    • Phil Windley
    • photography
    • photoJAR
    • photos
    • php
    • pickle soup
    • pickup
    • piclens
    • Pictures
    • plasma tv
    • Playa Del Carmen
    • plugin
    • plugins
    • poinsettia
    • Political
    • politics
    • portablecontacts
    • PostGreSQL
    • PostGresSQL
    • poverty
    • privacy
    • problems
    • product: web
    • professional
    • Programming
    • Projects
    • prophet
    • protect_from_forgery
    • protests
    • prototype
    • psych
    • psychology
    • queue
    • rails
    • rails 2.0
    • rails conference
    • Rails I18n Textmate bundle
    • RailsConf
    • RailsConf07
    • rake
    • rant
    • react
    • react router
    • React.js
    • Reactive
    • reactjs
    • reactrouter
    • realestate
    • recipe
    • recommender
    • records
    • red green
    • redirect_to
    • regular expressions
    • relay
    • religion
    • render
    • replace
    • reputation
    • require.js
    • research
    • REST
    • restaurant
    • rFacebook
    • ridiculous
    • rightscale
    • ringside networks
    • river
    • river trail
    • robots
    • romantic
    • roomba
    • rpsec
    • rspec
    • rspec bundle
    • rss
    • ruby
    • Ruby On Rails
    • Ruby On Railst
    • ruby_on_rails
    • rvm
    • s3
    • sad
    • Salesforce
    • samsung ml1740
    • sarah sample
    • scalability
    • School
    • Science
    • scorm
    • scream
    • script.aculo.us
    • SDK
    • search
    • senate
    • SEO
    • serverless
    • servers
    • sessions
    • shopping
    • shortcodes
    • shoulda
    • sign language
    • simple
    • small business
    • snakes
    • Snelgrove
    • social graph
    • social media
    • social network dilution
    • social networking
    • social search
    • Social Software
    • socialsoftware
    • society2.0
    • soda
    • software
    • software design
    • Software Development
    • solidity
    • solo
    • soviet union
    • sovrin
    • sql
    • sql server
    • SQL Server 2005 Express
    • sql server 2008 express
    • starling
    • start ups
    • startups
    • starvation
    • stm bags
    • stm medium alley
    • storage
    • subversion
    • target
    • tax
    • Teachers Without Borders
    • tech
    • teeth whitening
    • template not foudn
    • templates
    • test-spec
    • testing
    • tests
    • textmate
    • thanksgiving point
    • The Japanese Mafia is controlling the weather
    • The Kids
    • The Plan Collection
    • The Web
    • theming skin
    • theplancollection
    • theplancollection.com
    • time
    • timr
    • tips
    • to_json
    • tools
    • Tour de France
    • transfer
    • translations
    • Travel
    • Travel, Disneyland, LA
    • trees
    • trip
    • truffles
    • tutorial
    • tutorials
    • tv
    • twitter
    • Uncategorized
    • uninsured
    • universe
    • unpack
    • unread
    • upgrades
    • uploader
    • uploads
    • user discovery
    • user interface
    • userfly
    • utah
    • utah government
    • utah senate
    • utf8
    • Vacation
    • values
    • vinegar
    • virtual hosts
    • walmart
    • warranty
    • Waste of Time
    • weather
    • Web
    • web design
    • web development
    • Web RTC
    • Web2.0
    • web2con2006
    • webservices
    • weddings
    • Wesley Connell
    • whereigo
    • wife
    • windows
    • Wired
    • wishlist
    • with
    • word press
    • Wordpress
    • work
    • workling
    • wpmu
    • xml
    • yeast
    • yellowstone
    • zentest
    ©2025 Justin Ball | Powered by SuperbThemes & WordPress