将 Handlebars 组件输出作为参数传递给助手
Passing a Handlebars component output as a parameter to a helper
我想将组件的输出用作我的助手的参数,但收效甚微。
我的 Ember 模板是这样的:
<td class="wrap">
{{generate-url 'http://whosebug.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://whosebug.com">Visit</a>
</td>
现在我有一个输出 HTML 的组件 (my-component.hbs) 具有以下内容:
{{#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://whosebug.com"><span class="red">alphabet</span></a>
</td>
我曾天真地尝试过 {{generate-url 'http://whosebug.com' (my-component name="abc" longName="alphabet")}}
,但在评估特定的 Handlebar 时会输出错误。
感谢您的澄清,起初有点难以理解。
我不使用 ember.js,只使用原始的 Handlebars.js。但是在我看来,您不能将助手链接起来将结果从一个传递到另一个,即使是内置的查找助手也无济于事。如果你想这样做,你可以安装 ember-composable-helpers. Another solution that I've found on 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}}
希望对您有所帮助。我还将编辑您的 post 以添加 emberjs 标签,以便其他人最终可以给出更好的答案。
我想将组件的输出用作我的助手的参数,但收效甚微。
我的 Ember 模板是这样的:
<td class="wrap">
{{generate-url 'http://whosebug.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://whosebug.com">Visit</a>
</td>
现在我有一个输出 HTML 的组件 (my-component.hbs) 具有以下内容:
{{#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://whosebug.com"><span class="red">alphabet</span></a>
</td>
我曾天真地尝试过 {{generate-url 'http://whosebug.com' (my-component name="abc" longName="alphabet")}}
,但在评估特定的 Handlebar 时会输出错误。
感谢您的澄清,起初有点难以理解。
我不使用 ember.js,只使用原始的 Handlebars.js。但是在我看来,您不能将助手链接起来将结果从一个传递到另一个,即使是内置的查找助手也无济于事。如果你想这样做,你可以安装 ember-composable-helpers. Another solution that I've found on 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}}
希望对您有所帮助。我还将编辑您的 post 以添加 emberjs 标签,以便其他人最终可以给出更好的答案。