어린이 컨트롤러 바인딩 속성

Question

부모 (arrayController) 속성을 자식 (itemController)에 바인딩하려고합니다. 바인딩은 this.set ('foo', property)와 같은 childController에서 프라퍼티를 설정할 때만 계산 된 속성을 사용하여 작동합니다.

App.IndexController = Ember.ArrayController.extend({ 
    numberOfAllLetters: (function() { 
    return this.getEach('lettersNo').reduce(function(prev, curr){ 
     return prev + curr 
    }); 
    }).property('@each.lettersNo'), 

    numberOfAllLetters2: (function() { 
    return this.getEach('length2').reduce(function(prev, curr) { 
     return prev + curr; 
    }) 
    }).property('@each.length2') 

}); 

// child 
App.WordController = Ember.ObjectController.extend({ 
    lettersNo: (function() { 
    length = this.get('name').length; 
    // why only through 'set' the arrayController binds properly? 
    // if in parent controller I bind to '@each.length2', it works good. but why? 
    this.set('length2', length); 
    return this.get('name').length; 
    }).property('name') 
}); 

핸들 : 내가 뭔가를 놓친 거지 궁금하고 있어요

<script type="text/x-handlebars" data-template-name="index"> 

    <ul> 
    {{#each word in model itemController="word"}} 
    <li>{{input value=word.name}}</li> letters: 
    {{word.lettersNo}} 
    {{/each}} 
    </ul> 
    Total letters:{{numberOfAllLetters}} <br/> <!-- doesnt work --> 
    Total letters2:{{numberOfAllLetters2}} <br/> <!-- works --> 

</script> 

난 아이의 템플릿, 자녀의 컨트롤러에 동일한 속성을 사용하여 부모의 컨트롤러에 바인더 제본 할 수없는 이유. http://jsfiddle.net/licancabur/de1k7jcb/

Answer 1

모두 Ember.ObjectController 및 Ember.ArrayControllerwill be deprecated in future 그래서 당신이 당신의 엠버 버전을 업그레이드하려는 경우이를 사용하지 않는 것이 좋습니다 : 여기

는 바이올린입니다. 그래서 Ember.ObjectController 없애는 및 협력 솔루션을 내놓았다 :

App.Word = Ember.Object.extend({ 
    lettersNo: (function() { 
     console.log('lettersNo invoked') 
    length = this.get('name').length; 
    console.log('length change', length); 

    return length 
    }).property('name') 
}); 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return [ 
     App.Word.create({ 
      id: 1, 
      name: 'one' 
     }), 
     App.Word.create({ 
      id: 2, 
      name: 'two' 
     }), 
     App.Word.create({ 
      id: 3, 
      name: 'three' 
     }), 

    ]; 
    } 
}); 

App.IndexController = Ember.ArrayController.extend({ 
    numberOfAllLetters: (function() { 
    return this.getEach('lettersNo').reduce(function(prev, curr){ 
     return prev + curr 
    }); 
    }).property('@each.lettersNo'), 
}); 

템플릿 : 나는 그것을 해결하기 위해 관리 방법

<script type="text/x-handlebars" data-template-name="index"> 

    <ul> 
     {{#each word in model}} 
      <li>{{input value=word.name}}</li> letters: 
      {{word.lettersNo}} 
     {{/each}} 
    </ul> 
    Total letters: {{numberOfAllLetters}} <br/> 

</script> 

Working JSFiddle.

? 단어 컬렉션 (model)을 반복 할 때 템플릿에만 WordController을 사용한다고 언급했습니다. IndexController은 model에 추가 동작이 있다는 것을 모릅니다. 따라서 @each.lettersNo은 컨트롤러에만 존재하지 않습니다. 그러나 Ember.Object - App.Word을 만들 때 템플릿과 IndexController 모두 속성이 lettersNo 인 것으로 알고 있습니다.