Handlebars RegisterHelper with Ember Error

Question

I'm pretty lost after trying numerous different things. I am building an Ember site and inside of one of my Handlebars templates, I want to display a link only if a condition is true. Here is my template.

<script type="text/x-handlebars" data-template-name="project">
    <div class="project-container">
        {{is_external model.url model.title}}
    </div>
</script>

Now, my registerHelper in my js file:

Handlebars.registerHelper('is_external', function(url, title, options) {
  if (url.indexOf("codepen") < 0) {
      return "<p class='view-external-link'>"+
            "<a href='{{url}}'' aria-label='View {{title}}'' target='_blank'>Visit Site</a>"+
            "</p>";
  }
});

The error I keep receiving however, is: Uncaught TypeError: Cannot read property 'isHelperFactory' of undefined coming from my ember.js file.

Ideally, I would prefer to just return true or false from the helper to keep the Html out of my helper function but first I just need some help getting it working.

I am including ember, ember_compiler, and handlebars on my page as well.

Answer 1

My understanding of Ember is that since even 1.x, Ember included its own instance of Handlebars, so your external instance might be interfering.

The Ember v2.2.0 documentation on templates says to use Ember.Helper.helper, as does v1.13.0. Maybe give that a try and see if it helps.

Answer 2

What is the version of your Ember?

When i generate helper Ember uses syntax like this

import Ember from "ember";

// http://emberjs.com/deprecations/v1.x/#toc_ember-select

export function checkEquality([leftSide, rightSide]) {
    return leftSide === rightSide;
}

export default Ember.Helper.helper(checkEquality);

In the template

{{is-equal item.selection selection}}

And if you want to use html within helper

you need to return

yourHtml.htmlSafe();