Ember.js Masonry 渲染不等待数据模型生成

Question

我正在尝试在假设的电子商务站点中构建最畅销商品的砌体视图，但在通过 RESTAdapter 生成数据模型之前，砌体正在呈现。这是我的 Ember.js 代码：

App.Userprofile = DS.Model.extend({
    loggedIn: DS.attr('boolean'),
    name: DS.attr('string'),
    totalItems: DS.attr('number'),
});

App.ApplicationRoute = Ember.Route.extend({

    setupController: function(controller) {
        this.store.find('userprofile', 'bat@man.com').then (function(userprofile) {
            controller.set ('model', userprofile);
        });
    }
});

App.ApplicationAdapter = DS.DjangoRESTAdapter.extend({
    host: HOST,
    namespace: 'api'
});

App.ApplicationView = Ember.View.extend({
    elementId: '',
    classNames: ['container','fullwidth'],
    templateName: 'application'
});

App.Cloud = DS.Model.extend({
    item: DS.attr('string'),
    numberItems: DS.attr('number'),
    rank: DS.attr('number')
});

App.CloudAdapter = DS.DjangoRESTAdapter.extend({
    host: HOST,
    namespace: 'api',
});

App.CloudController = Ember.ObjectController.extend({
    needs: ['application'],
    cloudSize: function() { // Determines the size of the div
        var cloudsize = Math.round (this.get('model.numberItems') * 5 / this.get('controllers.application.totalItems')) + 1;
        var divName = "score" + cloudsize.toString();
        return divName;
    }.property('model.numberItems', 'controllers.application.totalitems')
});

App.ItemcloudRoute = Ember.Route.extend({
    setupController: function(controller) {
        this.store.findAll('cloud').then (function(itemcloud) {
            controller.set ('model', itemcloud);
        });
    }
});

App.ItemcloudController = Ember.ArrayController.extend({
    needs: ['cloud', 'application'],
    sortProperties: ['rank'],
});

App.ItemcloudView = Ember.View.extend({
    elementId: 'magicgrid',
    classNames: ['cloudcontainer'],
    templateName: 'itemcloud',
    didInsertElement: (function() {
        this._super();
        Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
    }).observes('controller.itemcloud'),

    applyMasonry: function() {
        setTimeout( function() { // settimeout to ensure masonry is called after data models are generate
            console.log ("applyMasonry being called");
            $('#magicgrid').masonry({
                itemSelector: '.company',
                isAnimated: true
            });
        }, 2000);
    }
});

这是生成 itemcloud 的模板文件部分。

    <script type="text/x-handlebars" data-template-name='itemcloud'>
            {{#each controller.model itemController="cloud"}}

                <div {{bind-attr class=":company cloudSize"}}>
                    <div class="companylogo">
                        <img src="images/logos/color-logos/logo-01.jpg" />
                    </div>
                    <div class="count">{{numberItems}}</div>
                </div>
            {{/each}}
            <div class="clearfix"></div>
    </script>

现在，由于数据获取和模板渲染的异步性质，我正在努力寻找一种方法来保持 Masonry 渲染，直到获取数据之后。我的研究表明，为 CloudController 对象使用视图会很有用，但我试图弄清楚我当前的设计中是否缺少某些东西。另外，如果有人可以在此处为 CloudController 对象提供正确使用视图的指针

如果我需要提供更多说明，请告诉我。谢谢！

Answer 1

如果您在setupController Ember 中执行此操作，则假定模型已经准备好并继续渲染页面，尽管响应没有从服务器返回。

最简单的方法是在模型挂钩中返回您的模型/承诺。 Ember 将等待渲染页面，直到模型被解析。

App.ItemcloudRoute = Ember.Route.extend({
    model: function(){   
        this.store.find('cloud');
    }
});

上面的代码将执行与您的代码相同的操作，除了 Ember 将等待 find 解决，然后再在控制器上创建和设置模型。

根据 kingpin2k cmets 更新答案以反映工作代码：

 App.ApplicationRoute = Ember.Route.extend({
    model: function() {  
        return this.store.find ('userprofile', 'bat@man.com');  
    },  
    setupController: function(controller, model) {  
        controller.set ('model', model);  
    }  
});