Eu estava trabalhando anteriormente comEmber.StateManager e agora estou fazendo alguns testes antes de finalmente mudar paraEmber.Router, mas não estou conseguindo entender como vincular adequadamente meus dados de exibição da coleção que reside em meu controlador.

Eu tenho uma estrutura de testes muito simples comEmber.Router que está funcionando bemnavegação-sábio, mas quando se trata de ligação de dados não está funcionando como esperado, e confesso que estou perdido agora. Quanto aos meus dados, eu tenho uma simples API da Web ASP.NET MVC4 executando um serviço REST que está funcionando bem (testei com o Fiddler e está tudo bem). Armazenando em SQL com EF4. * E sem problemas.

Quanto ao aplicativo cliente, no meucontacts.index rota, eu tentei ligá-lo noconnectOutlets (Eu deveria estar fazendo isso em um método diferente?), mas meu código não parece estar funcionando corretamente desde que meu ponto de vista nunca é vinculado.

O que eu tentei antes, noconnectOutlets método decontacts.index rota:

1

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

2

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

Eu também tentei usar oenter método com

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

E eu tentei vinculá-lo diretamente na visão como:

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

Aqui está a versão atual do meu código:

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

Aqui estão os modelos relevantes:

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

Como teste, também tentei preencher manualmente ocontent coleção no meu controlador como o seguinte, mas novamente, estava vazio quando eu naveguei para essa rota:

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

Certo, se você conseguir ler até agora, aqui está a minha pergunta: Como vincular corretamente uma coleção a uma exibição usando Ember.Router?

Eu tenho visto vários exemplos, bem como outras questões em SO, e ainda não vi nada que funcione para mim (sinta-se livre para apontar outras amostrascom ligação)

Obrigado