Ember.js-如何使用Ember.Router將集合正確綁定到視圖？

Question

我以前使用過Ember.StateManager ，現在我進行了一些測試，最后才切換到Ember.Router ，但是我無法理解如何正確地綁定來自控制器中集合的視圖數據。

我在Ember.Router有一個非常簡單的測試結構，可以很好地進行導航 ，但是在數據綁定方面，它不能按預期工作，我承認我現在迷路了。 至於我的數據，我有一個運行REST服務的簡單ASP.NET MVC4 Web API，它運行良好（我已經使用Fiddler進行了測試，這一切都很好）。 使用EF4。*存儲在SQL中，沒有問題。

對於客戶端應用程序，在我的contacts.index路由中，我嘗試將其綁定到connectOutlets （我應該用其他方法執行此操作嗎？），但是我的代碼似乎無法正常工作，因為我的視圖從未綁定。

我以前嘗試過的方法，在contacts.index路由的connectOutlets方法中：

1個

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

2

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

我也嘗試將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>

作為測試，我還嘗試了如下所示在控制器中手動填充content集合，但同樣，當我導航到該路線時，它為空：

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

是的，如果您設法閱讀到現在，這是我的問題：如何使用Ember.Router將集合正確綁定到視圖？

我已經看到了許多示例以及SO中的其他問題，但是我還沒有發現任何對我有用的東西（可以指出其他具有約束力的示例）

謝謝

Answer 1

綁定不起作用，因為“數組正在變異，但屬性本身未更改”。 https://stackoverflow.com/a/10355003/603636

使用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}}