Ember.js砌体渲染不'；不要等待数据模型生成

我试图在一个假设的电子商务网站上构建一个最畅销商品的砌石视图，但是在数据模型可以通过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>

{{{#each controller.model itemController=“cloud”}
{{numberItems}}
{{/每个}}

现在，由于数据获取和模板呈现的异步特性，我正在努力找到一种方法来保持砖石渲染，直到数据获取之后。我的研究表明，为CloudController对象使用一个视图会很有用，但我正试图找出我当前的设计中是否缺少一些东西。另外，如果有人能在这里为CloudController对象提供正确使用视图的指针

---

如果需要进一步澄清，请告诉我。谢谢

如果在

setupController

Ember中执行此操作，则假定模型已准备就绪，并继续呈现页面，尽管服务器未返回响应

最简单的方法是在模型钩子中返回模型/承诺。Ember将等待呈现页面，直到模型已解析

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

上面的代码将执行与您的代码相同的操作，只是Ember将在控制器上创建和设置模型之前等待查找结果的解析

根据kingpin2k的意见，更新答案以反映工作代码：

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

---

感谢kingpin2k，但我需要itemCloudController来确保CloudController和ApplicationController在此之前完成。在本例中，CloudController依赖于ApplicationController获取的值（totalItems，用于计算CloudController中的divSize）。我该如何处理这个场景呢？切换应用程序路径并使用模型挂钩。在解决父模型的资源之前，不会提取子模型。太好了，谢谢@kingpin2k-不知道我怎么会错过它！！将应用程序路径设置为使用模型挂钩效果非常好。编辑了答案以反映这一点，