개체 집합 내에서 개별 개체 작업 처리?

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> 

엠버 개체 :은 이후 옵션 컨트롤러 (모델에 의해 백업되지 않습니다

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