Ember.js - 如何收集正确绑定使用Ember.Router一个看法?(Ember.js -

2019-06-26 00:17发布

我以前有工作Ember.StateManager ,现在我正在做一些测试之前,我终于切换到Ember.Router ,但我不理解如何正确地从驻留在我的控制器集合绑定我的观点的数据。

我有一个非常简单的测试结构Ember.Router这是工作的罚款导航明智的,但是当涉及到数据绑定它不按预期工作,我承认我现在迷路了。 至于我的数据,我有一个简单的ASP.NET MVC4的Web API运行的是工作的罚款REST服务(我曾与小提琴手测试,这一切都很好)。 在SQL存储与EF4。*有没有问题。

对于客户端应用程序,在我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>

作为测试,我也尝试过手动的populat content在我的控制器像下面集合,但同样,当我浏览到这条路线是空的:

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

对了,如果你设法读取到现在为止,我的问题是:如何收集正确绑定使用Ember.Router一个看法?

我已经看到了大量的实例,以及在这样其他的问题,我还没有看到任何东西,我还没有工作(随时与结合点出其他样品)

谢谢

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 - How to properly bind a collection to a view using Ember.Router?