Reputation: 3130
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:
/rooms
route, app does a App.Room.find()
call/rooms/1
route, app sets a selectedRoom
property on the RoomController
.selectedRoom
property in the rooms
template to indicate which room is currently selected.isSelected
computed property using the selectedRoom
property in each RoomController
to adjust the display of that particular roomThis 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
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