привязка к свойствам детских контроллеров

Question

Я хочу связать свойство parent (arrayController) с дочерними элементами (itemController). Связывание работает только тогда, когда я устанавливаю свойства в childController, например this.set ('foo', property) вместо использования вычисленных свойств.

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. Поэтому я придумал решение, которое избавляется от 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.

Как мне удалось решить эту проблему? Вы упоминали, что используете WordController только в своем шаблоне - при итерации по набору слов (model). Ваш IndexController не знал, что model имеет какое-либо дополнительное поведение, поэтому @each.lettersNo просто не существует для контроллера. Однако, когда было создано Ember.Object - App.Word - оба шаблона и IndexController знали, что он вычислил свойство lettersNo.