home
  • Blog
2.4
  • Getting Started
  • Tutorial
    • Creating Your App
    • Setting Up Tests
    • Routes and Templates
    • The Model Hook
    • Installing Addons
    • Using Ember Data
    • Building a Simple Component
    • Creating a Handlebars Helper
    • Building a Complex Component
    • Services and Utilities
    • Deploying
  • The Object Model
  • Routing
  • Templates
  • Components
  • Controllers
  • Models
  • Application Concerns
  • Testing
  • Ember Inspector
  • Addons and Dependencies
  • Configuring Ember.js
  • Contributing to Ember.js
  • Glossary
Old Guides - You are viewing the guides for Ember v2.4.0.
Go to v5.0.0

Creating a Handlebars Helper

Edit pencil

So far, our app is directly showing the user data from our Ember Data models. As our app grows, we will want to manipulate data further before presenting it to our users. For this reason, Ember offers Handlebars template helpers to decorate the data in our templates. Let's use a handlebars helper to allow our users to quickly see if a property is "standalone" or part of a "Community".

To get started, let's generate a helper for rental-property-type:

ember g helper rental-property-type

This will create two files, our helper and its related test:

installing helper
  create app/helpers/rental-property-type.js
installing helper-test
  create tests/unit/helpers/rental-property-type-test.js

Our new helper starts out with some boilerplate code from the generator:

app/helpers/rental-property-type.js
import Ember from 'ember';

export function rentalPropertyType(params/*, hash*/) {
  return params;
}

export default Ember.Helper.helper(rentalPropertyType);

Let's update our rental-listing component template to use our new helper and pass in rental.type:

app/templates/components/rental-listing.hbs
<article class="listing">
  <a {{action 'toggleImageSize'}} class="image {{if isWide "wide"}}">
    <img src="{{rental.image}}" alt="">
    <small>View Larger</small>
  </a>
  <h3>{{rental.title}}</h3>
  <div class="detail owner">
    <span>Owner:</span> {{rental.owner}}
  </div>
  <div class="detail type">
    <span>Type:</span> {{rental.type}}
    <span>Type:</span> {{rental-property-type rental.type}} - {{rental.type}}
  </div>
  <div class="detail location">
    <span>Location:</span> {{rental.city}}
  </div>
  <div class="detail bedrooms">
    <span>Number of bedrooms:</span> {{rental.bedrooms}}
  </div>
</article>

Ideally we'll see "Type: Standalone - Estate" for our first rental property. Instead, our default template helper is returning back our rental.type values. Let's update our helper to look if a property exists in an array of communityPropertyTypes, if so, we'll return either 'Community' or 'Standalone':

app/helpers/rental-property-type.js
import Ember from 'ember';

const communityPropertyTypes = [
  'Condo',
  'Townhouse',
  'Apartment'
];

export function rentalPropertyType([type]/*, hash*/) {
  if (communityPropertyTypes.contains(type)) {
    return 'Community';
  }

  return 'Standalone';
}

export default Ember.Helper.helper(rentalPropertyType);

Handlebars passes an array of arguments from our template to our helper. We are using ES2015 destructuring to get the first item in the array and name it type. Then we can check to see if type exists in our communityPropertyTypes array.

Now in our browser we should see that the first rental property is listed as "Standalone", while the other two are listed as "Community".

left arrow
Building a Simple Component
Building a Complex Component
right arrow
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue