Javascript Ember.js-如何使用Ember.Router将集合正确绑定到视图？

我以前使用的是

Ember.StateManager

，现在我正在做一些测试，最后才切换到

Ember.Router

，但我无法理解如何正确绑定驻留在控制器中的集合中的视图数据

我有一个非常简单的测试结构，带有

Ember.Router

，它在导航方面工作得很好，但是当涉及到数据绑定时，它并没有像预期的那样工作，我承认我现在迷路了。至于我的数据，我有一个简单的ASP.NET MVC4 Web API，它运行一个REST服务，运行得很好（我用Fiddler进行了测试，一切都很好）。使用EF4.*存储在SQL中，没有问题

至于客户端应用程序，在我的

contacts.index

路径中，我尝试在

connectOutlets

中绑定它（我应该用另一种方法进行绑定吗？），但我的代码似乎无法正常工作，因为我的视图从未绑定过

我以前尝试过的，在联系人的

连接插座
方法中。索引
路径：

一,

二,

我还尝试将
enter
方法用于

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

我试着在视图中直接绑定它，比如：

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

以下是我的代码的当前版本：

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

以下是相关模板：

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

好的，如果你一直读到现在，我的问题是：
如何使用Ember.Router将集合正确绑定到视图

我在SO中看到了许多示例以及其他问题，但我还没有看到任何适合我的示例（请随意指出其他绑定示例）

谢谢
绑定不起作用，因为“数组正在变化，但属性本身没有改变”

使用App.initialize和Ember.Router，视图和控制器现在可以自动连接。几乎没有理由手动将视图中的联系人绑定到控制器的内容，因为您已经可以访问它

更改视图的模板以包括：

{{#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}}

{{{#if controller.isLoaded}}//在ajax成功函数中设置为true
{{#控制器中的每个联系人}
{{view App.ContactListItemView contactBinding=“contact”}
{/each}
{{else}
您没有联系人

:( 
{{/if}
谢谢你，兄弟，我想我的脑袋被非路由器类型的代码卡住了
<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>

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

{{#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}}