Question

我正在开展一个项目，根据他们作为云购买的次数显示畅销商品列表。我正在使用来自Ember.js的砌体显示数据，我想显示按照＆＃34; numberItems＆＃34;排列的项目。 10个不同的div大小 - 1到10，基于项目总数中numberItems的百分比。（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>

谢谢！

Answer 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')
});

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

1 个答案: