CODEWITHSUNDEEP
javascriptdata-bindingember.js
Brandon
Brandon

Reputation: 3130

Can't get controller properties and bindings to work properly in Ember - pulling my hair out

Good morning,

I would appreciate any help you can provide. I'm currently pulling my hair out in frustration. I really want to get the hang of Ember but I must be missing something.

All I want to do is the following:

  1. User visits /rooms route, app does a App.Room.find() call
  2. User visits /rooms/1 route, app sets a selectedRoom property on the RoomController.
  3. Use the selectedRoom property in the rooms template to indicate which room is currently selected.
  4. Create an isSelected computed property using the selectedRoom property in each RoomController to adjust the display of that particular room

This should be easy, but it is not working for me.

Routes

App.RoomsRoute = Ember.Route.extend
  setupController: ->
    @controllerFor('application').set('currentRoute', 'rooms') 
  model: ->
    App.Room.find()

App.RoomRoute = Ember.Route.extend
  setupController: (model) ->
    @controllerFor('application').set('currentRoute', 'rooms') 
    @controllerFor('rooms').set('selectedRoom', model) 
  model: ->
    App.Room.find(params.room_id)

Controller

(this should set a default value so that when the user is only at /rooms, there is a string to write to the template)

App.RoomsController = Ember.ArrayController.extend
  selectedRoom: 'default'

App.RoomController = Ember.ObjectController.extend
  needs: ['rooms']
  isSelected: ( ->
    selectedRoom = 'controllers.rooms.selectedRoom'
    if selectedRoom.id == @get('id')
      return true
    else
      return false
  ).property('controllers.rooms.selectedRoom')

Template

rooms

<p>My selected room: {{ selectedRoom.room_id }}</p>

{{#each room in controller}}
  {{#linkTo 'rooms.room' room}} Room {{ room.room_id }} {{/linkTo}}
{{/each}}

room

# This template is a contrived simplification of what I want to do... but essentially I just want to be able to access the `isSelected` property of the `RoomController`
<div {{ bindAttr class='isSelected' }}>
  <p>Room {{ room.room_name }}</p>
</div>

Upvotes: 0

Views: 215

Answers (1)

Jason Schock
Jason Schock

Reputation: 208

When I ran your code (with some blanks filled in) on an older version of Ember (v1.0.0-pre.4), it seemed to work as you wanted, with a selected room becoming highlighted when you clicked on it.

When I tried it with the latest version (1.0.0-rc.4) it wasn't working, so this tells me it's probably a breaking change in Ember to blame.

According to this answer, the model and setupController hooks are called under different circumstances.

To make your code work, I had to add controller.set("model", model); in setupController:

App.RoomsRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    this.controllerFor('application').set('currentRoute', 'rooms');
    // Load the model property here because the model hook isn't 
    // called in this case
    controller.set("model", model);
  },
  model: function() {
    return App.Room.find();
  }
});`

Not an Ember expert, and not sure if this is the same problem you were having, but this works for me. The full working code I tried is here: https://gist.github.com/jasonschock/5667656#file-app-js-L15

Upvotes: 1

Related Questions