I have a component which has bootstrap tabs and I am trying to use a helper to decide which tab is active
template.hbs
<div class="well">
<ul class="nav nav-tabs" role="tablist">
<li class="{{if (check-equality activeComponent "comp1") "active"}}">
<a {{action "makeActive" "comp1" }}>comp1</a>
</li>
<li class="{{if (checkEquality activeComponent "comp2") "active"}}">
<a {{action "makeActive" "comp2" }}>comp2</a>
</li>
</ul>
<div class="info">
{{component activeComponent}}
</div>
</div>
compoent.js
import Ember from 'ember';
export default Ember.Component.extend({
activeComponent: null,
setup: function() {
this.activeComponent = "comp1";
}.on("init"),
actions: {
makeActive: function(clicked_tab) {
this.set("activeComponent", clicked_tab);
},
}
});
As you can see the component uses a helper “check-equality”
check-equality.js
import Ember from 'ember';
export function checkEquality(params, hash) {
return (params[0] === params[1]);
}
export default Ember.Helper.helper(checkEquality);
But when the component renders I get an error in console as
Error: Assertion Failed: A helper named ‘checkEquality’ could not be found
What am I missing here?