Handling individual object action within set of objects? - events

Question

I have a nested list of objects and I'm having trouble targeting individual ones. I have an array of Items, each of which has many Options. Right now an action is caught by my (intended) singular OptionController but changes are applied to all options.
So, how do I target just one Option?
Sample jsBin: http://jsbin.com/ONAsIpa/4/edit
Templates:
<script type="text/x-handlebars" data-template-name="application">
<p><strong>Ember.js example:</strong><br> Finally, a dashboard that monitors 'items', & their child 'options'!!</p>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="items">
<h2>Items:</h2>
<dl>
{{#each}}
<dt>Item: {{title}}</dt>
<dd>Cost: {{cost}}</dd>
<dd class='options'>{{render 'options' options}}</dd>
{{/each}}
</dl>
</script>
<script type="text/x-handlebars" data-template-name="options">
<dl>
{{#each option in controller }}
{{render option}}
{{/each}}
</dl>
</script>
<script type="text/x-handlebars" data-template-name="option">
<dt>Option cost: {{option.cost}}</dt>
<dd {{bindAttr class=":opt-btn isSelected"}}{{action 'toggleOption'}}>Pick Me!</dd>
</script>
Ember Objects:
App = Ember.Application.create();
/**** ROUTES ****/
App.Router.map(function() {
this.resource('items');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('items');
}
});
App.ItemsRoute = Ember.Route.extend({
model: function() {
var a = Em.A();
a.pushObject( App.Item.create({title: 'A', cost: '100', options: buildMockOptions('A')}));
a.pushObject( App.Item.create({title: 'B', cost: '200', options: buildMockOptions('B')}));
a.pushObject( App.Item.create({title: 'C', cost: '300', options: buildMockOptions('C')}));
return a;
}
});
buildMockOptions = function(someVar){
var arr = [];
for(var i = 0;i<3;i++){
var opt = App.Option.create({someOption: 'Option for ' + someVar + ': ' + i});
opt.cost = 5*i;
arr.pushObject(opt);
}
return arr;
};
/**** MODELS ****/
App.Item = Ember.Object.extend({
title: '',
cost: '',
quantity: '',
options: null,
totalOptionsCost: function(){
var j = this.get('options').reduce(
function(prevValue, currentValue, index, array){
return prevValue + parseInt(currentValue.get('cost'), 10); }, 0);
return j;
}.property('options.#each.cost')
});
App.Option = Ember.Object.extend({
someOption: '',
cost: ''
});
/**** CONTROLLERS ****/
App.ItemsController = Ember.ArrayController.extend({
totalOptions: function(){
var opts = this.mapBy('options');
return [].concat.apply([], opts).length;
}.property(),
totalOptionCost: function(){
var sum = this.reduce(function(prev, curr){
return prev + curr.get('totalOptionsCost');},0);
return sum;
}.property('#each.totalOptionsCost'),
actions: {
toggleOption: function(opt) {
alert('ItemsController caught action');
}
}
});
App.OptionController = Ember.Controller.extend({
actions: {
toggleOption: function(opt) {
this.set('isSelected', !this.get('isSelected') );
alert('OptionController caught action');
}
}
});

Answer 1

The option controller isn't backed by a model (since it's extending controller). It was almost as if this was a partial converted. So it's mostly a scoping issue.
App.OptionController = Ember.ObjectController.extend({
{{render 'option' option}}
{{cost}} instead of {{option.cost}}
http://jsbin.com/OjOvarE/1/edit