Ember.js 다른 모델의 속성을 기반으로 한 속성을 계산했습니다.

Question

저는 클라우드로 구입 한 횟수를 기준으로 인기 판매 품목 목록을 표시하는 프로젝트를 진행하고 있습니다. Ember.js의 석조물을 사용하여 데이터를 표시하고 있는데 총 항목 수 중 numberItems의 백분율을 기준으로 10 가지 div 크기 (1에서 10까지)로 "numberItems"에 따라 정렬 된 항목을 표시하려고합니다. (0 ~ 10 %의 div 크기 1 등).

{"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 코드가 있습니다, 위의 모델에서 필자는 클라우드 모델의 DIV의 크기를 계산하는 TOTALITEMS에게 재산을 지금

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 속성을 올바르게 참조합니다. 여기에 같은 코드가 있습니다.

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