Wie arbeiten Sie mit mehreren Modellen in Ember JS (ohne Ember Data)?

Question

Ich habe ein kleines Beispiel erstellt, um zu versuchen, dass mehrere Modelle ohne Ember-Daten funktionieren.

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

Lenker:

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

Wenn ich direkt an die localhost/#/employee URL navigieren, funktioniert es völlig in Ordnung, aber wenn ich auf dem „Show Mitarbeiter“ klicken, erhalte ich folgende Fehlermeldung:

Ich vermisse wahrscheinlich irgendwo etwas, aber ich weiß nicht genau, auf welches Objekt sich der Fehler gerade bezieht. Mein Modell-Hook wird korrekt aufgerufen, wenn ich den Button drücke, genauso wie wenn ich mit manuell durch Eingabe der URL navigiere, so dass ich nicht verstehe, was genau in den beiden erwähnten Fällen anders ist.

Answer 1

Endlich hat dieses Ding funktioniert.

Mein Fehler war zu versuchen, neu zu erstellen (lesen Sie Copy-Paste) Evil Trout's example eine Ember-Anwendung ohne Ember-Daten zu tun, und die zugrunde liegenden Konzepte nicht gut genug zu verstehen.

Meine findAll Methode gab ein Promise-Objekt zurück, obwohl der Controller ein Array erwartet, daher Uncaught TypeError. Was Sie tun müssen, ist eine leere ArrayProxy zurückgeben, die nach Erhalt der JSON-Antwort ausgefüllt wird.

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

Wenn Sie richtig ein Array mit dieser Methode zurückgeben, müssen Sie nicht explizit angeben, dass der Controller ein ArrayController ist.

Meine Frage ist jetzt irgendwie albern, dass ich weiß, was ich falsch gemacht habe, aber hoffentlich wird es jemand anderem helfen, anzufangen.