ember.js, как я могу отобразить данные после загрузки страницы?

Я действительно новичок в emberjs, но я действительно хочу узнать об этом больше. Я создаю веб-приложение с ember и ember-data.

Итак, вопрос в следующем. У меня есть страница (пользователи), которая должна отображать всех пользователей объектов, определенных в models/users.js. Теперь, насколько я понимаю emberjs, страница ждет ответа (в моем случае rest 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');
    });
});

То, что я хочу сделать, это загрузить страницу при получении данных и затем поместить ее в мой контроллер.

Спасибо.


ember.js ember-data
person AnthonyC    schedule 13.12.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Метод model заблокирует рендеринг до тех пор, пока обещание не будет разрешено. Вы можете использовать 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}}
person Marcio Junior    schedule 13.12.2013