Question

我有一个嵌套的对象列表，我无法针对个别对象。我有一个Items数组，每个都有很多Options。现在，我的（预期）单数OptionController捕获了一个动作，但更改适用于所有选项。

那么，我如何只定位一个选项？

示例jsBin： http://jsbin.com/ONAsIpa/4/edit

模板：

  <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

选件控制器不受模型支持（因为它是扩展控制器）。几乎就好像这是一个部分转换。所以这主要是一个范围问题。

App.OptionController = Ember.ObjectController.extend({

{{render 'option' option}}

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

http://jsbin.com/OjOvarE/1/edit

处理对象集内的单个对象操作？

1 个答案: