Question

我想将parent（arrayController）属性与children（itemController）绑定。只有当我在childController中设置像this.set（＆＃39; foo＆＃39;，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.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。

绑定到子控制器属性

1 个答案: