title: Ember.js computed property based on property from another model
body: <p>I am working on a project to display a list of top selling items based on the number of times they have been bought as a cloud. I am displaying the data using masonry from Ember.js and I want to display the items arranged as per the "numberItems" in 10 different div sizes - 1 to 10 based on the percentage of numberItems out of the total number of Items. (div size1 for 0-10% and so on). </p>
  
  <pre><code>{"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}
  ]}
  </code></pre>
  
  <p>I get the total number of items as a part of the user profile which is in the following format.</p>
  
  <pre><code>{"userprofiles": [
      {"loggedIn": true, 
       "firstName": "Clark", 
       "totalItems": 1098, 
       "lastName": "Kent", 
       "id": "mail@clarkkent.com"}
  ]}
  </code></pre>
  
  <p>Now both these are fetched using DjangoRESTAdapter.</p>
  
  <p>I have the following Ember.js code:</p>
  
  <pre><code>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'
  });
  </code></pre>
  
  <p>Now, from the above Model I need the totalItems property to calculate the size of the div in the Cloud model, and in which I am not able to refer the totalItems property properly. Here is the code for the same.</p>
  
  <pre><code>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');
      }
  });
  </code></pre>
  
  <p>Note the the data is properly being called and rendered and there is no issue there. </p>
  
  <p>I feel there should be a very straightforward way to do it and not the way i am doing. Let me know if I should rephrase my question in some way. I know I can do the calculation on the server side and send out another field but that is just not elegant.</p>
  
  <p>[Update]: Here is relevant portion of the template file:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name='application'&gt;
      {{totalItems}} Items for &lt;strong&gt;{{fullName}}&lt;/strong&gt;
      {{outlet}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name='itemcloud'&gt;
      {{#each cloud in model}}
          &lt;div {{bind-attr class=":company cloud.divsize"}}&gt;
              &lt;div class="companylogo"&gt;
                  &lt;img src="images/logos/color-logos/logo-01.jpg" /&gt;
              &lt;/div&gt;
              &lt;div class="count"&gt;{{cloud.numberItems}}&lt;/div&gt;
          &lt;/div&gt;
      {{/each}}
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks!</p>