CODEWITHSUNDEEP
ember.jsember-data
awwester
awwester

Reputation: 10162

Table structured data in EmberJS

I am building an application for ordering coffee. On one of the routes I have the store menu, which has a series of drinks with attributes of type, size, price. So for example a 12oz Mocha could cost $5.00.

I'm having trouble structuring this data and displaying it how I'm thinking, maybe I'm not thinking in an "ember way" as I'm new to ember and frontend development in general.

In my route I've tried a couple different things. I have a 'store-drink' model which returns all the drinks for the store. I've tried using that as my model and am able to return all the store drinks in my model, but it's difficult to display all the drinks in a table like format since there's no built-in helper like {{if drink.type == 'Mocha'}}.

The other thing I've tried is using Ember.RSVP.hash to separate the drinks in the route, and then in my template install Ember Truth Helpers to determine the size of each drink.

// routes/menu.js
model: function() {
  // get the drinks for the current store, for now hardcode
  const storeId = 4;

  return Ember.RSVP.hash({
    mochas: this.store.find(
      'store-drink', {'store':storeId, 'type':'Mocha'}),
    espressos: this.store.find(
      'store-drink', {'store':storeId, 'type':'Espesso'}),
  })
},
setupController: function(controller, model) {
  controller.set('mochas', model.mochas);
  controller.set('espressos', model.espressos);
}

//menu.hbs
{{#each drink in mochas}}
  {{if (eq drink.type 'Mocha')}}
    <h2>mochas</h2>
    {{drink.type}}
  {{/if}}
{{/each}}

Not only am I getting all the drinks returned in my 'mochas' object in the controller, but I can't seem to get the the installed if helper to work either.

Any suggestions? Maybe I should have a whole different approach or maybe I'm just missing something.

I'm on ember 1.13

Upvotes: 2

Views: 65

Answers (1)

Kit Sunde
Kit Sunde

Reputation: 37075

I haven't used ember-truth-helper, but looking at the docs shouldn't it be:

{{#each drink in mochas}}
  {{#if (eq drink.type 'Mocha'}}}
    <h2>mochas</h2>
    {{drink.type}}
  {{/if}}
{{/each}}

Also you wrote {{item.type}} instead of {{drink.type}}. Though now that you've sub-queried the mocha drinks you should be able to just get rid off the if. Leaving just:

{{#each drink in mochas}}
  <h2>mochas</h2>
  {{drink.type}}
{{/each}}

For find it simply sends a GET to the backend, which is responsible for what is returned. If you want to filter in place do:

this.store.find('store-drink', {'store':storeId}, function(drink) {
  return drink.type === 'Mocha';
});

Upvotes: 1

Related Questions