Events 在一组对象中处理单个对象操作？

我有一个嵌套的对象列表，但我很难找到单个对象。我有一个

项目数组

，每个项目都有许多

选项

。现在，我的（预期的）单数

选项控制器捕捉到一个操作，但更改应用于所有选项

那么，我如何只针对一个选项呢

示例jsBin:

模板：

  <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>

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');
    }
  }  
});


Ember.js示例：
最后，一个监控“项目”及其子“选项”的仪表板

{{outlet}}
项目：
{{{#各}
项目：{{title}
成本：{{Cost}
{{呈现“选项”选项}
{{/每个}}
{{{#控制器中的每个选项}
{{呈现选项}}
{{/每个}}
选项成本：{{Option.cost}
选我！

余烬对象：

  <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>

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');
    }
  }  
});

App=Ember.Application.create（）；
/****路线****/
App.Router.map（函数（）{
这是指资源（“项目”）；
});
App.IndexRoute=Ember.Route.extend({
重定向：函数（）{
此项。过渡到（“项目”）；
}
});
App.ItemsRoute=Ember.Route.extend({
模型：函数（）{
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'）}））；
返回a；
}
});
buildMockOptions=函数（someVar）{
var-arr=[]；
对于（var i=0；i选项控制器没有模型支持（因为它是扩展控制器）。这几乎就像是一个部分转换。因此，这主要是一个范围问题

App.OptionController = Ember.ObjectController.extend({

{{render 'option' option}}

{{cost}} instead of {{option.cost}}