Dlaczego kierownica {{#each}} nie jest ponownie wyświetlana podczas zmiany kolejności?

Question

Próbuję zarządzać posortowanym wyświetlaniem tablicy obiektów na podstawie właściwości przełączonej na kontrolerze. Z tego powodu nie mogę użyć domyślnego sortProperties dostępnego dla ArrayController.

Spodziewanym rezultatem jest to, że kiedy po raz pierwszy kliknę przycisk "edytuj", jestem w stanie wprowadzić zmiany do pozycji i kiedy kliknę przycisk Zapisz, powinien on ponownie wyświetlić blok {{#each}}, aby pokazać nową kolejność nazw.

Czy to błąd w kierownicy, czy robię coś nie tak?

JSBin: Handlebars not re-rendering when property toggled

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

można dostać pracy jak to

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'); 
     } 
    } 
});