CODEWITHSUNDEEP
javascriptmodel-view-controllerember.js
Jay Lane
Jay Lane

Reputation: 1401

EmberJS Model Iteration by Value

I am working on a restaurant's website as my first ember project and I am having a hard time trying to figure out how to handle the menu model.

currently the models/menu.js file reads like this:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  price: DS.attr('number'),
  soyFree: DS.attr('string'),
  glutenFree: DS.attr('string'),
  addOnName: DS.attr('string'),
  addOnPrice: DS.attr('number'),
  type: DS.attr('string'),
  isAppetizer: Ember.computed('type', function(){
    return this.get('type') == 'Appetizer';
  }),
  isBreakfast: Ember.computed('type', function(){
    return this.get('type') == 'Breakfast';
  })
});

My menu template file is:

<div class="col-md-8 col-md-offset-2 text-center">
  <h2>Menu</h2>
  <h2 class="text-center">Appetizers</h2>
  {{#each model as |menu|}}
    {{#if menu.isAppetizer}}

      <p>
        <span><strong>{{menu.name}}</strong> - <em>{{menu.description}}</em> - {{menu.price}}</span>
        {{#if session.isAuthenticated}}<button class="btn btn-danger" {{action "deleteMenuItem" menu}}>Delete</button>{{/if}}
      </p>
    {{/if}}

  {{/each}}
  <h2 class="text-center">Breakfast</h2>
  {{#each model as |menu|}}
    {{#if menu.isBreakfast}}

      <p>
        <span><strong>{{menu.name}}</strong> - <em>{{menu.description}}</em> - {{menu.price}}</span>
        {{#if session.isAuthenticated}}<button class="btn btn-danger" {{action "deleteMenuItem" menu}}>Delete</button>{{/if}}
      </p>
    {{/if}}

  {{/each}}
</div>
{{outlet}}

As you can see I am having to reiterate through all of the menu model entries for each section (Appetizers / Breakfast). Is there a way with ember that I can only iterate over the specific item type for each #each block. ie., 

{{#each model.type == 'Appetizer'}} 
  Fill the appetizer section 
 {{/each}}

Here is my route file is: 

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return this.store.findAll('menu');
  }
});

Upvotes: 1

Views: 37

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

  1. You can return the required value from model hook and access it using model.appetizerMenu for Appetizer menu.
    model() {
        return this.store.findAll('menu').then((result) => {
            return {
                appetizerMenu: result.filterBy('isAppetizer', true),
                breakFastMenu: result.filterBy('isBreakfast', true),
            }
        });
    }

2.you can have computed property in controller.

appetizerMenu: Ember.computed.filterBy('model','isAppetizer',true),
breakFastMenu: Ember.computed.filterBy('model','isBreakfast',true),

3.Further you can simplify that you dont need computed property in the model for every type like currently you are having. You can use type attribute alone for filtering whenever is required.

    appetizerMenu: Ember.computed.filterBy('model','type','Appetizer'),
    breakFastMenu: Ember.computed.filterBy('model','type','Breakfast'),

4.If you want more shopisticated helper like you suggested {{#each model.type == 'Appetizer'}} then you might be interested in ember-composable-helpers

Upvotes: 1

Related Questions