EmberJS+Firebase Journey #2 — Binding data with a dropdown

So in my previous post I managed to pull data from Firebase, populate the dropdown and allow selection using Ember Power Select. The next step is to bind selected data to the newly generated model, which will be pushed to firebase server later.

Coming from a mobile development background, I am very used to IDEs and coding in Sublime text is a pain as there is not much error message ! Once, I encountered an error message that seems like a deadlock to my application. I cannot trigger any action on my “Add New” button that tries to push the new model to Firebase, and all I got was this error message :

ember.debug.js:6778 Uncaught Error: Assertion Failed: You’re not allowed to have more than one controller property map to the same query param key, but both `categories:_qpMap` and `categories.index:_qpMap` map to `_qpMap`. You can fix this by mapping one of the controller properties to a different query param key via the `as` config option, e.g. `_qpMap: { as: ‘other-_qpMap’ }`

What does it exactly mean? So let’s take a look at this simple code
(see what’s wrong before scrolling down) :

Ember.Route.extend … What? Route in a controller? I must be nuts! No wonder the application couldnt trigger the right action, because there is a bug in this controller that has a Route extension. I so miss IDE after spending so much time just to figure out a small bug like this. Nevertheless, after fixing this, the rest of the binding is pretty straightforward.

My power select component in new.hbs

chooseCategory is an action called in the controller

notice here that I have change to Ember.Controller.extend, *phew* its working now…

So when I select an item from the dropdown, onchange will fire the action inside, which is “chooseCategory” and pass in the model of category loaded from here :

routes/plans/new.js

this.set(‘selectedCategory’, cat) will set the selected category into the dropdown list.
this.set(‘model.plan.category’, cat.get(‘name’)) will get the name from the selected category and put it inside the plan model that I created. So after this, I will perform the same trick as before, save and push to Firebase and viola! We have just wired up a dropdown list with EmberJS!

I will continue to post the small and big milestones I have cleared as I journey through EmberJS in building my web application. If you have any comments do drop me a response so we can exchange knowledge! Thanks for reading and stay tune for even more stories about my EmberJS journey!