我想使用组件的输出作为我的助手的参数,但没有取得太大成功。
我的 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")}}
,但是当评估特定的 Handlebar 时会输出错误。
最佳答案
感谢您的澄清,一开始有点难以理解。
我不使用 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 标签,以便其他人最终可以给出更好的答案。
关于templates - 将 Handlebars 组件输出作为参数传递给助手,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52825359/