How do you work with multiple models in Ember JS (without Ember Data)?

Question

I created a small example to try and make multiple models work without 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();
    }
});

Handlebars:

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

When I navigate to the localhost/#/employee url directly, it works perfectly fine, but when I click on the "Show employees" button, I get the following error:

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

I'm probably missing something somewhere, but I'm not exactly sure which object the error is referring to right there. My model hook is being called correctly when I push the button, same as if I navigate with by manually inputting the url, so I don't understand what exactly is different in the two cases mentioned.

Answer 1

Finally got this thing working.

My error was to try to recreate (read copy-paste) Evil Trout's example of doing an Ember application without Ember Data, and not understanding the underlying concepts well enough.

My findAll method was returning a Promise object although the controller expects an array, hence the Uncaught TypeError. What you need to do is return an empty ArrayProxy which will be populated once the JSON response is received.

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

If you correctly return an array with this method, you don't have to explicitly specify that the controller is an ArrayController.

My question is kind of silly now that I know what I did wrong, but hopefully it will help someone else getting started.