Question

我是emberjs的新手，但我真的想了解更多。我正在使用ember和ember-data构建一个webapp。

所以，问题如下。我有一个页面（用户），它应该显示在models / users.js中定义的所有对象用户。现在，据我了解emberjs，页面等待答案（在我的情况下休息api），然后在把手{{outlet}}中加载任何数据，我想知道是否可以加载页面和（图像， css等）并显示数据？

==my users.hbs
{{#each user in controller}}
 <li>{{user.name}} - {{user.email}}</li>
{{else}}
 <li>no users… :-(</li>
{{/each}}

==usersRoute.js
    App.UsersRoute = Ember.Route.extend({
    model: function(){
        return $.getJSON('/REST_API/users').then(function(data){
            return data.body;
        });
    }  
});

==usersController.js
App.UsersController = Ember.ArrayController.extend({
   sortProperties: ['name'],
   sortAscending: true // false = descending
});

==user.js (model)
App.User = DS.Model.extend({
    name         : DS.attr(),
    email        : DS.attr()
});

==store
App.ApplicationAdapter = DS.FixtureAdapter;
App.store = DS.Store.extend()

==router
App.Router.map(function(){
    this.resource('users', function(){
        this.resource('user', { path:'/:user_id' }, function(){
            this.route('edit');
        });
        this.route('create');
    });
});

我想要做的是在获取数据时加载页面然后放入我的控制器

谢谢。

Answer 1

model方法将阻止呈现，直到解析了promise。您可以使用setupController以便呈现模板，并且当从ajax获取数据时，each将重新呈现，因为我们设置了controller.set('model', data.body);。

<强> usersRoute.js

App.UsersRoute = Ember.Route.extend({
    setupController: function(controller){
        $.getJSON('/REST_API/users').then(function(data){
            // ajax callback is detached from runloop, so we attach again
            Ember.run(function() {
                controller.set('model', data.body);
            });              
        });
    }
});

<强> users.hbs

{{#each user in model}}
 <li>{{user.name}} - {{user.email}}</li>
{{else}}
 <li>no users… :-(</li>
{{/each}}

ember.js，如何在页面加载后显示数据？

1 个答案: