将 Handlebars 组件输出作为参数传递给助手

Question

I'd like to use the output of a component as a parameter to my helper, but am not having much success.

My Ember template is something like this:

<td class="wrap">
  {{generate-url 'http://stackoverflow.com' 'Visit'}}
</td>

and the helper:

import { helper } from '@ember/component/helper';
import { htmlSafe } from '@ember/string';

export function helperFunction (params) {
    if (!params) {
        return "";
    }

    var link = params[0];
    if (!link) {
        return  "";
    }

    var linkText = params[1];
    if (!linkText) {
        linkText = link;
    }

    return new htmlSafe('<a href="' + link + '">' + linkText + '</a>');
}

export default helper(helperFunction);

The two combined successfully generates:

<td class="wrap">
  <a href="http://stackoverflow.com">Visit</a>
</td>

Now I have a component (my-component.hbs) that outputs HTML with the following:

{{#if name}}
  <span class="red">{{longName}}</span>
{{/if}}

This component works if it is referenced in the template like so: {{my-component name="abc" longName="alphabet"}} (renders <span class="red">alphabet</span> as expected).

But I am stumped trying to get the HTML output into the second parameter of generate-url to produce:

<td class="wrap">
  <a href="http://stackoverflow.com"><span class="red">alphabet</span></a>
</td>

I have tried naively {{generate-url 'http://stackoverflow.com' (my-component name="abc" longName="alphabet")}} , but that outputs errors when that particular Handlebar is evaluated.

Answer 1

Thanks for the clarification it was a bit hard to understand at first.

I don't use ember.js but just the raw Handlebars.js. However to my mind you can't chain helpers to pass results from one to another, even the builtin lookup helper will not help. If you want to do so you can install ember-composable-helpers . Another solution that I've found on https://github.com/wycats/handlebars.js/issues/304 is to use a custom helper that will chain your calls :

Handlebars.registerHelper('chain', function() {
  var helpers = [];
  var args = Array.prototype.slice.call(arguments);
  var argsLength = args.length;
  var index;
  var arg;

  for (index = 0, arg = args[index];
       index < argsLength;
       arg = args[++index]) {
    if (Handlebars.helpers[arg]) {
      helpers.push(Handlebars.helpers[arg]);
    } else {
      args = args.slice(index);
      break;
    }
  }

  while (helpers.length) {
    args = [helpers.pop().apply(Handlebars.helpers, args)];
  }

  return args.shift();
});

and here is one example of call :

{{chain "taxAdd" "formatPrice" this.product.price}}

I hope this will help. I'll also edit your post to add the emberjs tag so that someone else could eventually give a better answer.