Ember CLI + HTMLBars -- Passing Parameters to a Helper

0
votes

I'm trying to pass a parameter from my HTMLBars template to a Helper.

As per the documentation, I've created a helper and explicitly registered the helper:

export default Ember.HTMLBars.makeBoundHelper('is-foo', function(value, options) {
   console.log("value: "+value);
});

But I get an error "Error: Assertion Failed: makeBoundHelper generated helpers do not support use with blocks"

So I've tried using Ember.HTMLBars.helper and Ember.HTMLBars.registerHelper as suggested here but I get errors "TypeError: Ember.default.HTMLBars.helper is not a function"

If I don't reigster the helper explicitly:

export default function(value, options) {
   console.log("value: "+value);
};

Then I can pass a parameter, but it doesn't get resolved and logs out the literal text of what I passed.

So I tried the solution outlined here but it doesn't seem to work with CLI

The result I want is for a component to be dynamically selected based on the value of the parameter I send to the helper. My HTMLBars code looks like:

{{#each foo in model}}
  {{is-foo parameter}}
    {{a-component}}
  {{else}}
    {{another-component}}
  {{/is-foo}}
{{/each}}

I'm not sure what to do next. Any help is appreciated.

2
ember.jsember-cli
with CLI use ember g helper foo. It will create a foo helper for you. Then you can look at its code to see how you can make your own manually. – Grapho
Thank you for the response! I generated a helper with CLI, but it also creates a bound helper that I can't use with blocks. Basically I need a way to conditionally choose a component from my template, but I can't find any way to get it working. – TheCompiler
Please give your HTMLBars code. – Hasib Mahmud
I've updated the question with the HTMLBars code. – TheCompiler
Since: "The result I want is for a component to be dynamically selected based on the value of the parameter I send to the helper." possible duplicate of How to include a component from a controller in ember – givanse

2 Answers

0
votes

The behavior that you want is achieved in this answer.

If you would like to know how the component helper is implemented you can check its source code here: helpers/component.js (currently line 63)

0
votes

Do something like this in Ember CLI project, because helper file name is the helper name

export default Ember.HTMLBars.makeBoundHelper(function(value, options) {

instead of

export default Ember.HTMLBars.makeBoundHelper('is-foo', function(value, options) {

Edit

Upon @TheCompiler 's request here is the suggestion as an answer.

Do something like in HTMLBars

{{if is_parameter}}
  {{a-component}}
{{else}}
  {{another-component}}
{{/if}}

In Controller or Component the computed parameter property

is_parameter: function () {
  var pm = this.get('parameter');

  return (your condition for `pm`)? true : false;
}.property('parameter')