为什么在重新排序列表时没有把手{{#each}}重新登记？

Question

我试图根据控制器上的切换属性管理对象数组的排序显示.正因为如此我不能使用默认sortProperties可用的ArrayController.

预期的结果是,当我第一次点击"编辑"按钮时,我能够对项目进行更改,当我点击保存时,它应该重新渲染{{#each}}块以显示新的名称顺序.

这是车把上的一个小虫还是我做错了什么？

JSBin:当属性切换时,把手不会重新渲染

HTML:

<script type="text/x-handlebars">
 {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h4>Raw \{{sorted_list}} property</h4>
    {{sorted_list}}<br/>
  <h4>Iterated `\{{#each item in sorted_list}}` property</h4>
  <ul>
    {{#each item in sorted_list}}
      {{#if editing}}
        <li>{{input type="text" value=item.name}}</li>
      {{else}}
        {{item.name}}<br/>
      {{/if}}
    {{/each}}
  </ul>
  {{#if editing}}
    <button {{action "edit_stuff"}}>Save</button>
  {{else}}
    <button {{action "edit_stuff"}}>Edit</button>
  {{/if}}
</script>

JS:

var App = Ember.Application.create();

App.Router.map(function() {});

App.Person = Ember.Object.extend({
  toString: function() {
    return this.name;
  }
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      App.Person.create({name: "Jules"}),
      App.Person.create({name: "Zed"}),
      App.Person.create({name: "Vincent"})
    ];
  }
});

App.IndexController = Ember.ArrayController.extend({
  editing: false,
  sorted_list: (function() {
    return this.sort_people();
  }).property('editing'),
  sort_people: function() {
    var sorted;
    sorted = this.get('content');
    sorted.sort(function(a, b) {
      return Ember.compare(a.name, b.name);
    });
    this.set('content', sorted);
    return sorted;
  },
  actions: {
    edit_stuff: function() {
      this.sort_people();
      this.toggleProperty('editing');
    }
  }

});

Answer 1

你可以让它像这样工作

App.IndexController = Ember.ArrayController.extend({
    editing: false,
    sorted_list: (function() {
        return this.get('content').sortBy('name');
    }).property('editing'),
    actions: {
        edit_stuff: function() {
            this.toggleProperty('editing');
        }
    }
});