Ember.js - How to properly bind a collection to a view using Ember.Router?

Question

I was previously working with Ember.StateManager and now I'm doing some tests before I finally switch to Ember.Router, but I'm failing to understand how to properly bind my view data from the collection residing in my controller.

I have a very simple testing structure with Ember.Router which is working fine navigation-wise, but when it comes to data binding it's not working as expected, and I confess I'm lost now. As for my data, I have a simple ASP.NET MVC4 Web API running a REST service which is working fine (I have tested with Fiddler and it's all good). Storing in SQL with EF4.* and no problems there.

As for the client app, in my contacts.index route, I tried binding it in the connectOutlets (should I be doing this in a different method?), but my code doesn't seem to be working correctly since my view is never bound.

What I have tried before, in the connectOutlets method of contacts.index route:

1

router.get('applicationController').connectOutlet('contact');

2

router.get('applicationController').connectOutlet(
    'contact',
    router.get('contactController').findAll()
);

I've also tried to use the enter method with

this.setPath('view.contacts',  router.get('contactController').content);

And I have tried to bind it directly in the view like:

App.ContactView = Ember.View.extend({
    templateName: 'contact-table'
    contactsBinding: 'App.ContactController.content'
});

Here's the current version of my code:

var App = null;

$(function () {

    App = Ember.Application.create();

    App.ApplicationController = ...
    App.ApplicationView = ...

    App.HomeController = ...
    App.HomeView = ...

    App.NavbarController = ...
    App.NavbarView = ...

    App.ContactModel = Ember.Object.extend({
        id: null,
        firstName: null,
        lastName: null,
        email: null,
        fullName: function () {
            return '%@ %@'.fmt(this.firstName, this.lastName)
        }.property('firstName', 'lastName')
    });

    App.ContactController = Ember.ArrayController.extend({
        content: [],
        resourceUrl: '/api/contact/%@',
        isLoaded: null,

        findAll: function () {
            _self = this;
            $.ajax({
                url: this.resourceUrl.fmt(''),
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    $(data).each(function () {
                        _self.pushObject(App.ContactModel.create({
                            id: this.Id,
                            firstName: this.FirstName,
                            lastNaem: this.LastName,
                            email: this.Email
                        }));
                    });
                    alert(_self.get('content').length);
                    // this alerts 6 which is the same number of
                    // records in my database, and if I inspect
                    // the content collection in chrome, I see my data
                    // that means the problem is not the ajax call
                },
                error: function (xhr, text, error) {
                    alert(text);
                }
            });
        },
        find: function (id) {
            // GET implementation
        },
        update: function (id, contact) {
            // PUT implementation
        },
        add: function (contact) {
            // POST implementation
        },
        remove: function(id) {
            // DELETE implementation
        }
    });

    App.ContactView = Ember.View.extend({
        templateName: 'contact-table'
    });
    App.ContactListItemView = Ember.View.extend({
        templateName: 'contact-table-row'
    });

    App.Router = Ember.Router.extend({
        enableLogging: true,
        location: 'hash',

        root: Ember.Route.extend({
            // actions
            gotoHome: Ember.Route.transitionTo('home'),
            gotoContacts: Ember.Route.transitionTo('contacts.index'),

            // routes
            home: Ember.Route.extend({
                route: '/',
                connectOutlets: function (router, context) {
                    router.get('applicationController').connectOutlet('home');
                }
            }),
            contacts: Ember.Route.extend({
                route: '/contacts',
                index: Ember.Route.extend({
                    _self: this,
                    route: '/',
                    connectOutlets: function (router, context) {
                        router.get('contactController').findAll();
                        router.get('applicationController').connectOutlet('contact');
                        router.get('contactView').set('contacts', router.get('contactController').content);
                        // if I inspect the content collection here, it's empty, ALWAYS
                        // but if I access the same route, the controller will alert 
                        // the number of items in my content collection
                    }
                })
            })
        })
    });
    App.initialize();
});

Here are the relevant templates:

<script type="text/x-handlebars" data-template-name="contact-table">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            {{#if contacts}}
                {{#each contact in contacts}}
                    {{view App.ContactListItemView contactBinding="contact"}}
                {{/each}}
            {{else}}
                <tr>
                    <td colspan="2">
                    You have no contacts <br />
                    :( 
                    <td>
                </tr>
            {{/if}}
        </tbody>
    </table>
</script>

<script type="text/x-handlebars" data-template-name="contact-table-row">
    <tr>
        <td>
            {{contact.fullName}}
        </td>
        <td>
            e-mail: {{contact.email}}
        </td>
    </tr>
</script>

As a test, I've also tried manually populat the content collection in my controller like the following, but again, it was empty when I navigated to that route:

App.ContactController =  Ember.ArrayController.extend({
    content: [],
    init: function() {
        this._super();
        this.pushObject(
            App.ContactModel.create({ ... })
        );
    }
})

Right, if you manage to read until now, here's my question: How to properly bind a collection to a view using Ember.Router?

I have seen a number of examples, as well as other questions in SO, and I haven't seen anything that works for me yet (feel free to point out other samples with binding)

Thank you

Answer 1

The binding doesn't work because "the array is mutating, but the property itself is not changing". https://stackoverflow.com/a/10355003/603636

Using App.initialize and Ember.Router, views and controllers are now being automagically connected. There is very little reason to manually bind contacts in your view to the controller's content as you already have access to it.

Change your view's template to include:

{{#if controller.isLoaded}} // set this true in your ajax success function
  {{#each contact in controller}}
    {{view App.ContactListItemView contactBinding="contact"}}
  {/each}}
{{else}}
  <tr>
    <td colspan="2">
       You have no contacts <br />
       :( 
    <td>
  </tr>
{{/if}}