绑定到 children 的控制器属性

Question

我想绑定 parent (arrayController) 属性和 children (itemController)。仅当我在 childController 中设置属性时绑定才有效，例如 this.set('foo', 属性)，而不是使用计算属性。

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>

我想知道我是否遗漏了什么以及为什么我不能在 child 的模板、child 的控制器中使用相同的属性并绑定到 parent的控制器。

这里是fiddle：http://jsfiddle.net/licancabur/de1k7jcb/

Answer 1

Ember.ObjectController 和 Ember.ArrayController will 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.

绑定到 children 的控制器属性

binding to children's controllers properties

ember.js