Ember.js 基于另一个模型的属性计算属性答案

【问题标题】：Ember.js computed property based on property from another modelEmber.js 基于另一个模型的属性计算属性
【发布时间】：2014-05-20 12:12:56
【问题描述】：

我正在开展一个项目，根据购买次数作为云显示最畅销商品的列表。我正在使用 Ember.js 中的砌体显示数据，并且我想显示按照“numberItems”排列的 10 种不同 div 大小的项目 - 根据 numberItems 在项目总数中的百分比，从 1 到 10。（div size1 为 0-10% 等等）。

{"clouds": [
    {"numberItems": 202, "itemName": "item1", "rank": 1, "id": 1},
    {"numberItems": 342, "itemName": "item2", "rank": 2, "id": 2}, 
    {"numberItems": 122, "itemName": "item3", "rank": 5, "id": 3}, 
    {"numberItems": 121, "itemName": "item4", "rank": 7, "id": 4}, 
    {"numberItems": 95, "itemName": "item5", "rank": 3, "id": 5}, 
    {"numberItems": 72, "itemName": "item6", "rank": 6, "id": 6}, 
    {"numberItems": 22, "itemName": "item7", "rank": 4, "id": 7}
]}

我将项目总数作为用户配置文件的一部分，格式如下。

{"userprofiles": [
    {"loggedIn": true, 
     "firstName": "Clark", 
     "totalItems": 1098, 
     "lastName": "Kent", 
     "id": "mail@clarkkent.com"}
]}

现在这两个都是使用 DjangoRESTAdapter 获取的。

我有以下 Ember.js 代码：

App.Userprofile = DS.Model.extend({
    loggedIn: DS.attr('boolean'),
    firstName: DS.attr('string'),
    totalItems: DS.attr('number'),
    lastName: DS.attr('string'),
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName','lastName')
});

App.ApplicationRoute = Ember.Route.extend({

    model: function(params) {
        return this.store.find('userprofile', 'mail@clarkkent.com');
    }
});

App.ApplicationAdapter = DS.DjangoRESTAdapter.extend({

    host: HOST,
    namespace: 'api'
});

现在，从上面的模型中，我需要 totalItems 属性来计算 Cloud 模型中 div 的大小，并且我无法正确引用 totalItems 属性。这是相同的代码。

App.Cloud = DS.Model.extend({
    numberItems: DS.attr('number'),
    itemName: DS.attr('string'),
    rank: DS.attr('number'),
    divsize: function(value) {
        var that = this;
        value = null;
        this.store.find('userprofile', 'mail@clarkkent.com').then(function(model) {
            var ti = model.get('totalItems');
            console.log ("divsize is:" + value); // This gets run later than the outside console.log
            value = ti;
        });
        console.log ("divsize is:" + value); // This gets returned immediately and the page is rendered
        return "score4"; // I am returning a default value now
    }.property('numberItems')
});

App.CloudAdapter = DS.DjangoRESTAdapter.extend({

    host: HOST,
    namespace: 'api',
});

App.ItemcloudRoute = Ember.Route.extend({

    model: function(params) {
        return this.store.findAll('cloud');
    }
});

请注意，数据被正确调用和渲染，没有问题。

我觉得应该有一个非常简单的方法来做这件事，而不是我正在做的事情。让我知道我是否应该以某种方式改写我的问题。我知道我可以在服务器端进行计算并发送另一个字段，但这并不优雅。

[更新]：这是模板文件的相关部分：

<script type="text/x-handlebars" data-template-name='application'>
    {{totalItems}} Items for <strong>{{fullName}}</strong>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name='itemcloud'>
    {{#each cloud in model}}
        <div {{bind-attr class=":company cloud.divsize"}}>
            <div class="companylogo">
                <img src="images/logos/color-logos/logo-01.jpg" />
            </div>
            <div class="count">{{cloud.numberItems}}</div>
        </div>
    {{/each}}
    <div class="clearfix"></div>
</script>

谢谢！

【问题讨论】：

除了硬编码的电子邮件地址之外，云和用户配置文件实际上是如何相关的？还是类似于当前登录的用户？
我也包含了模板。在这种情况下，userprofile 类似于登录用户，并从默认应用程序模板呈现。 itemcloud 从应用程序模板中的 {{outlet}} 呈现。

标签： ember.js

【解决方案1】：

我可以通过使用控制器来解决这个问题。代码如下：

App.CloudController = Ember.ObjectController.extend({
    needs: ['application'],
    divsize: function() {
        var dsize = Math.round (this.get('model.numberItems') * 10 / this.get('controllers.application.totalItems')) + 1;
        console.log ("size is: " + dsize);
        return "score" + dsize;
    }.property('model.numberItems', 'controllers.application.totalitems')
});

【讨论】：