Jak pracować z wieloma modelami w Ember JS (bez danych Ember)?

Question

Stworzyłem mały przykład, aby spróbować wykonać wiele modeli bez 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(); 
    } 
}); 

Kierownice:

<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> 

Kiedy przejdź do localhost/#/employee URL bezpośrednio, działa perfekcyjnie, ale po kliknięciu na przycisk „Pokaż pracowników”, pojawia się następujący błąd:

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

Prawdopodobnie czegoś brakuje mi gdzieś, ale nie jestem do końca pewien, do którego obiektu odnosi się błąd. Mój hak modelu jest wywoływany poprawnie po naciśnięciu przycisku, tak samo jak przy nawigacji przez ręczne wprowadzanie adresu URL, więc nie rozumiem, co dokładnie jest różne w obu wymienionych przypadkach.

Answer 1

W końcu to zadziałało.

Mój błąd polegał na próbie odtworzenia (przeczytanie i wklejenie) Evil Trout's example robienia aplikacji Ember bez danych Ember i niezrozumienia podstawowych pojęć.

Moja metoda findAll zwróciła obiekt Promise, chociaż kontroler oczekuje tablicy, a zatem Uncaught TypeError. Należy zwrócić pustą wartość ArrayProxy, która zostanie wypełniona po otrzymaniu odpowiedzi 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; 
    } 
}); 

Jeśli poprawnie zwraca tablicę z tej metody, nie trzeba wyraźnie określić, że kontroler jest ArrayController.

Moje pytanie jest trochę głupie, ponieważ wiem, co zrobiłem źle, ale mam nadzieję, że pomoże to komuś innemu zacząć.