时间戳

首页 > 解决方案 > 将 Handlebars 组件输出作为参数传递给帮助程序

templates - 将 Handlebars 组件输出作为参数传递给帮助程序

问题描述

我想使用组件的输出作为我的助手的参数，但没有取得太大的成功。

我的 Ember 模板是这样的：

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

和帮手：

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);

两者结合成功生成：

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

现在我有一个组件（my-component.hbs），它输出带有以下内容的 HTML：

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

如果在模板中像这样引用该组件，则该组件可以工作：（按预期{{my-component name="abc" longName="alphabet"}}呈现）。<span class="red">alphabet</span>

但我很难将 HTML 输出转换为generate-url生成的第二个参数：

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

我天真地尝试过{{generate-url 'http://stackoverflow.com' (my-component name="abc" longName="alphabet")}}，但是在评估特定的把手时会输出错误。

标签： templatesember.jscomponentshandlebars.jshelper

解决方案

感谢您的澄清，起初有点难以理解。

我不使用 ember.js，而只使用原始的 Handlebars.js。但是在我看来，您不能链接助手将结果从一个传递到另一个，即使是内置的查找助手也无济于事。如果你想这样做，你可以安装ember-composable-helpers。我在https://github.com/wycats/handlebars.js/issues/304上找到的另一个解决方案是使用自定义助手来链接您的调用：

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();
});

这是调用的一个示例：

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

我希望这将有所帮助。我还将编辑您的帖子以添加 emberjs 标签，以便其他人最终可以给出更好的答案。

推荐阅读