s - Ember Guides</title>    <meta name="description" content="Helpers allow you to add additional functionality to your templates beyond what is included out-of-the-box in Ember. Helpers are most useful for transforming raw values from models and components into a format more appropriate for your users.   For example,...">  <meta name="referrer" content="unsafe-url">  <!----> <!----> <!----> <!---->   <meta property="og:title" content="Writing Helpers - Templates - Ember Guides">  <!---->   <meta property="og:description" content="Helpers allow you to add additional functionality to your templates beyond what is included out-of-the-box in Ember. Helpers are most useful for transforming raw values from models and components into a format more appropriate for your users.   For example,...">    <meta property="og:type" content="website">  <!----> <meta name="twitter:card" content="summary">  <!----> <!---->   <meta name="twitter:title" content="Writing Helpers - Templates - Ember Guides">  <!---->   <meta name="twitter:description" content="Helpers allow you to add additional functionality to your templates beyond what is included out-of-the-box in Ember. Helpers are most useful for transforming raw values from models and components into a format more appropriate for your users.   For example,...">  <!----> <!----> <!----><meta name="ember-cli-head-end" content>       <link integrity="" rel="stylesheet" href="/assets/vendor-c0cdfdb000e00000d000a00000b00fd0.css">     <link integrity="" rel="stylesheet" href="/assets/ember-guides-00dca0f0000a000d00fd0e00000c0000.css">     <link rel="shortcut icon" href="/images/favicon.png" />         </head>   <body  class="application version show version-show">     <script type="x/boundary" id="fastboot-body-start"></script><!---->  <header id="ember000000" class="es-header ember-view" role="banner"><div id="ember000000" class="ember-view"><div class="container"> <nav id="ember000000" class="navbar navbar-inverse navbar-expand-lg bg-inverse ember-view">      <a class="navbar-brand" href="https://www.emberjs.com">       <svg width="00" height="00" viewBox="0 0 000 000" xmlns="http://www.w0.org/0000/svg"><title>Ember Logo 0c White</title><g fill="#FFF" fill-rule="evenodd"><path d="M000.00 00.000s-0.00 0.000-00.000 0.000c-0.000-.000-0.000-00.000-0.000-00.000s0.000-00.000-0.000-00.00c-0.000-.000-0.000 0.000-0.000 0.000s-0.000 0.000-0.000 00.000l-.000.000s.00-00.00-.000-00.000c-.000-0.000-0.000-0.000-0.000 0.000-.000 0.000-0.000 00.000-0.000 00.000 0 0-0.00 0.000-00.00 0.000-0.000 0.000-00.00-0.000-00.00-0.000s00.000-0.000 00.000-00.00c-.000-00.000-00.000-00.000-00.000-0.00-0.000 0.000-00.000 0.000-00.00 00.000-.000.00-.000 0.00-.000 0.00s-0.00 0.000-00.000 0.000c0 0 00.000-00.000-0.00-00.000-0.000-0.000-0.00-.000-00.000 0.00-0.000 0.000 00.000-00.000 00.000-00.000C000.000.00 000.000-.000 000.000.000c-0.000 0.000-0.000 0.000-0.000 0.000s-0.000 00.000-00.000 00.00c-0.000 00.000-0.000 00.000-0.000 00.000s-0.000 0.00-0.000 0.000c-0.000.000-0.000-00.0-0.000-00.0s0.000-00.000 0.000-00.000c-.000-0.000-.00-0.000-0.000-0.000-0.000-0.000-0.00 0.000-0.00 0.000s-00.000 00.0-00.000 00.000l-.000.000-.000-.000s0.000-00.00.000-00.00c-0.000-.000-00.000 0.000-00.000 0.000s-0.000 00.000-0.00 00.000l-.000-.000s0.000-00.000 0.0-00.000c-.000-0.000-0.000-0.000-0.000-0.000s-0.000-.000-0.000 0.000c-0.000 0.000-0.000 00.00-0.000 00.000 0 0-00.000 0.000-00.000 0.000-0.000.000-0.000-0.000-0.000-0.000s00.000-0.000 00.000-00.000c-0.00-0.000-0.000-0.000-00.000-0.00-0.000.000-00.000 0.00-00.000 00.000-0.000 0.000-0.000 0.000-0.000 00.00 0 0-0.000.000-0.000-0.000-0.000-0.000-0.000 0-0.000 0s-0.000 0.000-.000 0.000c0.000 0.000 00.000 0.000 00.000 0.000.00 0.000 0.000 0.000 0.000 00.000 0.000 0.000 00.00-.000 00.00-.000l0.000-0.000s.000 0.000 0.00 0.00c0.000.000 0.000-.000 00.000-00.000 0.000-00.00 0.000-0.000 0.000-0.000.000-.000-0.000 00.000-0.000 00.000 0.000 0.000 0.000 0.000 0.000 0.000s0.00.000 0.000-0.000c0.000-0.000 0.000-00.000 0.000-00.000.00 0-0.000 00.00 0.000 00.000 0.000 0.000 00.000 0.000 00.000 0.000s0.000-0.000 0.000-0.000c0 0 0.000 0.000 00.000 0.0 00.00-0.000 00.000-00.000 00.000-00.000s0.00 00.00 00.00 00.000c00.000 0.00 00.000-0.000 00.000-0.000s-.000 0.000 0.000 0.000c0.000 0.000 0.000-0.00 0.000-0.00l0.000-00.000c.00 0 0.000 00.000 0.000 00.000 0.000 0.000 00.00-0.000 00.00-0.000s0.0-0.000 0.000-0.000c-.00-0.000-0.000-0.00-0.000-0.00zM00.00 00.000c0.00 0.000 0.00 0.00-0.000 00.000-0.00 0.0-0.000 0.00-0.000 0.00.000-00.000 0.000-00.000 00.000-00.000zm000.000-00.000c0.00 0.000-00.000 00.000-00.000 00.000.000-0.000 0.000-00.000 0.000-00.000s0.000-00.000 0.000-00.000zM000.00 00.0s-0.000-0.000 0.0-00.000c0.000-00.000 00.00-0.000 00.00-0.000s0.000 0.000 0.000 00.000C000.00 00.000 000.00 00.0 000.00 00.0zm00.000-00.000c0.00-0.000 0.000-0.000 0.000-0.000s0.000 0.00-.000 00.000c-0.000 0.000-00.000 0.000-00.000 0.000s-0.000-0.000 0.000-00.000z"/><path d="M000.000 00.000v-0.000h.000c.000 0 .000.000.000.00.000.00.00.000.000.000.000.00.000.000.000.000.000.000.000.000.000.000 0 .00-.000.00-.000.000-.000.000-.000.000-.000.000h-0.000zm-0.000-0.00v0.00h0.000v-0.000h.000l0.00 0.000h0.000l-0.000-0.000a0.0 0.0 0 0 0 .000-.00c.000-.000.000-.000.00-.00.000-.000.000-.00.000-.000.000-.000.000-.000.000-.000 0-.00-.000-0.000-.000-0.000-.000-.000-.00-.000-0.00-.000h-0.000zm-0.00 0.000c0-.000.000-0.000.00-0.000.00-.000.00-.000.00-0.000a0.000 0.000 0 0 0 0.00-.000 0.00 0.00 0 0 0 0.000-.00c.000 0 0.000.000 0.000.00.00.000.000.000 0.000.000s.00.0.000 0.000c.00.000.000 0.000.000 0.000s-.000 0.00-.000 0.00c-.000.000-.000.000-.000 0.000-.00.000-.000.000-0.000.000-.000.00-0 .00-0.000.00a0.00 0.00 0 0 0-0.000-.00 0.000 0.000 0 0 0-0.00-.00 0.000 0.000 0 0 0-.00-0.000 0.000 0.000 0 0 0-.00-0.00zm-0.000 0c0 .000.00 0.000.000 0.00.000.000.000 0.000 0.000 0.00.000.00 0.00.000 0.000 0.000.000.000 0.00.000 0.000.000.00 0 0.000-.000 0.00-.000a0.000 0.000 0 0 0 0.000-0.000 0.000 0.000 0 0 0 0.000-0.00c.000-.000.00-0.000.00-0.000 0-.000-.000-0.000-.00-0.000a0.000 0.000 0 0 0-0.00-0.000 0.000 0.000 0 0 0-0.00-.000c-.000 0-0.000.000-0.000.000a0.000 0.000 0 0 0-0.00 0.000c-.000.000-.000 0.000-.000 0.000z"/></g></svg>     </a>     <button id="ember000000" class="navbar-toggler collapsed ember-view">  <span class="navbar-toggler-icon"></span> </button> <div id="ember000000" class="navbar-collapse collapse ember-view"><ul id="ember000000" class="mr-auto nav navbar-nav ember-view"><!----><li id="ember000000" class="dropdown nav-item ember-view">              <a href="#" id="ember000000" class="dropdown-toggle nav-link ember-view" role="button">Docs <span class="caret"></span></a> <!----> </li> <!----><li id="ember000000" class="dropdown nav-item ember-view">              <a href="#" id="ember000000" class="dropdown-toggle nav-link ember-view" role="button">Releases <span class="caret"></span></a> <!----> </li> <li id="ember000000" class="nav-item ember-view">              <a href="https://emberjs.com/blog" class="nav-link">Blog</a>  </li><!----> <!----><li id="ember000000" class="dropdown nav-item ember-view">              <a href="#" id="ember000000" class="dropdown-toggle nav-link ember-view" role="button">Community <span class="caret"></span></a> <!----> </li> <!----><li id="ember000000" class="dropdown nav-item ember-view">              <a href="#" id="ember000000" class="dropdown-toggle nav-link ember-view" role="button">About <span class="caret"></span></a> <!----> </li>  </ul><ul id="ember000000" class="nav navbar-nav ember-view">              <form>       <div id="ember000000" class="search-input ember-view">  <input id="search-input" placeholder="Search the guides" autocomplete="off" type="search">  <div id="ember000000" class="ds-dropdown-results ember-tether ember-view"><!----></div></div>     </form>   </ul> </div> </nav></div>  </div>  </header> <!---->   <div class="info-banner-wrapper">     <div class="info-banner-container">       <div id="ember000000" class="ember-view"><p>Ember Octane is here! A lot has changed since Ember 0.00, including these Guides. Read more in the <a href="https://blog.emberjs.com/0000/00/00/octane-is-here.html">Ember Blog</a>.</p> </div>     </div>   </div>   <main class="container">   <aside class="sidebar">   <label for="version-select" class="visually-hidden">Guides version</label>  <div id="ember000000" class="ember-basic-dropdown ember-view"> <div aria-label="v0.0.0" aria-owns="ember-basic-dropdown-content-ember000000" tabindex="0" data-ebd-id="ember000000-trigger" role="button" id="ember000000" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-basic-dropdown-trigger--in-place ember-view">    <span class="ember-power-select-selected-item">            0.0 <!---->  </span> <!----><span class="ember-power-select-status-icon"></span> </div>   <div id="ember-basic-dropdown-content-ember000000" class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>  </div>    <input id="toc-toggle" class="toc-toggle visually-hidden" type="checkbox">   <label for="toc-toggle">Table of Contents <span class="visually-hidden">toggle</span></label>    <nav class="toc-container versions" aria-label="table of contents">     <ol id="ember000000" class="toc-level-0 ember-view"><!---->      <li class="toc-group toc-level-0"> <div id="ember000000" class="cp-Panel cp-is-closed ember-view"><a href="/v0.0.0/getting-started" id="ember000000" class="cp-Panel-toggle ember-view">              Getting Started </a> <div id="ember000000" class="cp-Panel-body ember-view"> <!----> </div> </div>      </li>       <li class="toc-group toc-level-0"> <div id="ember000000" class="cp-Panel cp-is-closed ember-view"><a href="/v0.0.0/tutorial" id="ember000000" class="cp-Panel-toggle ember-view">              Tutorial </a> <div id="ember000000" class="cp-Panel-body ember-view"> <!----> </div> </div>      </li>       <li class="toc-group toc-level-0"> <div id="ember000000" class="cp-Panel cp-is-closed ember-view"><a href="/v0.0.0/object-model" id="ember000000" class="cp-Panel-toggle ember-view">              The Object Model </a> <div id="ember000000" class="cp-Panel-body ember-view"> <!----> </div> </div>      </li>       <li class="toc-group toc-level-0"> <div id="ember000000" class="cp-Panel cp-is-closed ember-view"><a href="/v0.0.0/routing" id="ember000000" class="cp-Panel-toggle ember-view">              Routing </a> <div id="ember000000" class="cp-Panel-body ember-view"> <!----> </div> </div>      </li>       <li class="toc-group toc-level-0"> <div id="ember000000" class="cp-Panel cp-is-open ember-view"><a href="/v0.0.0/templates" id="ember000000" class="cp-Panel-toggle ember-view">              Templates </a> <div id="ember000000" class="cp-Panel-body cp-is-open ember-view">     <div class="cp-Panel-body-inner">                   <ol id="ember000000" class="toc-level-0 ember-view">      <li class="toc-link toc-level-0 "> <a href="/v0.0.0/templates/index" id="ember000000" class="ember-view">          