Come si lavora con più modelli in Ember JS (senza Ember Data)?

Question

Ho creato un piccolo esempio per provare a far funzionare più modelli senza Ember Data.

App = Ember.Application.create(); 

App.Router.map(function() { 
    this.resource('employees', function() { 
     this.route('employee'); 
    }); 
}); 

App.Employee = Ember.Object.extend({}); 

App.Employee.reopenClass({ 
    findAll: function() { 
     return $.getJSON("http://localhost/api/employee").then(
      function (response) { 
       var employees = []; 
       response.forEach(function (child) { 
        employees.push(App.Employee.create(child)); 
       }); 
       console.log(employees.join('\n')); 
       return employees; 
      } 
     ); 
    } 
}); 

App.EmployeesController = Ember.ArrayController.extend({}); 

App.EmployeesRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Employee.findAll(); 
    } 
}); 

manubrio:

<script type="text/x-handlebars"> 
    <p>Application template</p> 
    {{#linkTo employees}}<button>Show employees</button>{{/linkTo}} 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="employees"> 
    <p>Employees template</p> 
    {{#each controller}} 
    <p>{{Name}}</p> 
    {{/each}} 
    {{outlet}} 
</script> 

Se navigando al localhost/#/employee URL direttamente, funziona perfettamente bene, ma quando clicco sul pulsante "Mostra i dipendenti", ottengo il seguente errore:

Uncaught TypeError: Object #<Object> has no method 'addArrayObserver' 

Probabilmente mi manca qualcosa da qualche parte, ma non sono esattamente sicuro di quale oggetto si riferisca l'errore proprio lì. Il mio hook del modello viene chiamato correttamente quando spingo il pulsante, come se navigassi inserendo manualmente l'url, quindi non capisco cosa sia esattamente diverso nei due casi citati.

Answer 1

Finalmente ha funzionato.

Il mio errore è stato quello di provare a ricreare (leggere copia-incolla) Evil Trout's example di fare un'applicazione Ember senza Ember Data, e non capendo abbastanza bene i concetti sottostanti.

Il mio metodo findAll restituiva un oggetto Promise sebbene il controller si aspetti un array, da cui il Uncaught TypeError. Quello che devi fare è restituire uno ArrayProxy vuoto che verrà popolato una volta ricevuta la risposta JSON.

App.Employee.reopenClass({ 
    findAll: function() { 
     var employees = Ember.ArrayProxy.create({ content: [] }); 
     $.getJSON("http://localhost:49441/api/employee").then(
      function (response) { 
       response.forEach(function (child) { 
        employees.pushObject(App.Employee.create(child)); 
       }); 
      } 
     ); 
     return employees; 
    } 
}); 

Se si restituisce correttamente un array con questo metodo, non c'è bisogno di specificare in modo esplicito che il controller è un ArrayController.

La mia domanda è piuttosto stupida ora che so cosa ho sbagliato, ma spero che possa aiutare qualcun altro a iniziare.