Question

我之前正在使用Ember.StateManager，现在我在最终切换到Ember.Router之前正在做一些测试，但是我无法理解如何正确绑定我的视图数据来自驻留的集合在我的控制器里。

我有一个非常简单的测试结构，Ember.Router工作正常导航方式，但是当谈到数据绑定时，它没有按预期工作，我承认我是现在输了。至于我的数据，我有一个简单的ASP.NET MVC4 Web API运行REST服务，它工作正常（我已经用Fiddler进行了测试，这一切都很好）。使用EF4。*存储在SQL中，并且没有任何问题。

对于客户端应用，在我的contacts.index路由中，我尝试在connectOutlets中绑定它（我应该用不同的方法吗？），但我的代码似乎没有因为我的观点永远不受约束，所以工作正常。

我之前尝试过的，connectOutlets路线的contacts.index方法：

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中的其他问题，我还没有看到任何对我有用的东西（随意指出其他样本带有绑定）< / p>

谢谢

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

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

1 个答案: