在车把上有更好的方法吗?

Question

我使用把手吐出一些静态页面，使用部分，如:

{{> component/card size="small" title="Card Title" }}

现在取决于"大小"所需的卡片,我需要设置一些不同的顺风类。我目前是这样做的，但一定有更好的方法吗?将类添加到容器中并编写css是不可行的。

{{setVariable "additionalHeadingClass" "text-5 md:text-6 mb-4"}}
{{#ifEquals size "small"}}
{{setVariable "additionalHeadingClass" "text-4 mb-1"}}
{{/ifEquals}}
{{#ifEquals size "large"}}
{{setVariable "additionalHeadingClass" "text-4 sm:text-5 md:text-8 mb-4"}}
{{/ifEquals}}
<h3 class="text-primary font-bold {{@root.additionalHeadingClass}}">{{title}}</h3>

，这里是我使用的帮助器:

Handlebars.registerHelper("setVariable", function (varName, varValue, options) {
if (!options.data.root) {
options.data.root = {};
}
options.data.root[varName] = varValue;
});

Answer 1

我的意见是，模板中有太多的代码，它实际上做什么。尽管行数令人生畏，但我们实际上只想将size映射到类名字符串。我还建议不要使用setVariable，因为我发现当我们通过操纵上下文对象上的变量来创建副作用时，很难考虑到这一点。我更喜欢一个更功能风格的助手，我们只是给它size，它返回类名字符串。

我将使用简单的switch:

创建这样一个帮助器:

Handlebars.registerHelper('additionalClasses', function(size) {
switch (size) {
case 'large':
return 'text-4 sm:text-5 md:text-8 mb-4';
case 'small':
return 'text-4 mb-1';
default:
return 'text-5 md:text-6 mb-4';
}
});

然后我们可以将模板简化为更简单的:

<h3 class="text-primary font-bold {{additionalClasses size}}">{{title}}</h3>

我已经创建了一个小提琴供参考。