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

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>

下面是帮助者im，用：

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>

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