ember.js

How to implement a helper accessible from an ember component's template

I've written a component to 'wrap' a semantic-ui 'dropdown' ui element.

Within this 'dropdown' I need to use a #link-to to generate a link that will 'fire' when a row is selected. I would like to define a helper that would allow me to manipulate the string that would otherwise be the dropdown menu row's visible content. A concrete example would be capitalizing the string.

How do I do this ?

Thanks Dave

Solution

  • Helpers are accessible in all templates. Unless I am missing something this is as simple as:

    Em.Handlebars.helper('capitalize', function(string) {
  return string.capitalize();
});

    And in your components template, something like:

    <ul>
  {{#each dropDownItems}}
    <li>{{#link-to link}}{{capitalize text}}{{/link-to}}</li>
  {{/each}}
</ul>

    Of course the exact template depends on how your component is structured.

    capitalize() is a method available on Em.String throughout your app.

    You can read more about Ember helpers here.