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