Question

我不确定如何正确地将CSS应用于车把。因此，我在js文件中创建了辅助函数来设置变量，并且在使用这些变量（包含样式属性和值）时不会应用样式。缺少任何东西

辅助功能：

handlebars.registerHelper("setVar", function(varName, varValue, options) {
  options.data.root[varName] = varValue;
});

在车把文件内：

<script id="template" type="text/x-handlebars-template"></script>

{{setVar "tableStyling" "width: 100%;border: 1px solid lightgrey;border-collapse: collapse;"}}
{{setVar "thStyling" "border: 1px solid lightgrey;border-collapse: collapse;padding: 2px 4px;"}}
{{setVar "tdStyling" "border: 1px solid lightgrey;border-collapse: collapse;padding: 2px 4px;"}}
<table style={{tableStyling}}>
    <thead>
        <th style={{thStyling}}>Card Title</th>
        <th style={{thStyling}}>Expiry date</th>
        <th style={{thStyling}}>Target Url</th>
        <th style={{thStyling}}>Content Type</th>
        <th style={{thStyling}}>Entry Url</th>
    </thead>
    {{#each this}}
    <tr>
        <td style={{../tdStyling}}>{{cardTitle}}</td>
        <td style={{../tdStyling}}>{{expiryDate}}</td>
        <td style={{../tdStyling}}>{{targetUrl}}</td>
        <td style={{../tdStyling}}>{{type}}</td>
        <td style={{../tdStyling}}>{{contentfulUrl}}</td>
    </tr>
    {{/each}}
</table>
</script>

Answer 1

您可以直接在模板文件中编写CSS，而无需使用变量。
您可以将CSS作为字符串写在变量中，并通过直接在style属性中传递该变量来在模板中打印该变量。

style =“ {{{variableName}}”

要在模板中打印JSON或HTML，您可以使用三倍卷曲{{{varName}}}

Answer 2

我认为您在style属性中缺少引号。

在表格样式<table style="{{tableStyling}}">中添加引号为我解决了此问题。

有一个出色的网站http://tryhandlebarsjs.com/，您可以在其中试用模板和帮助程序。

希望这会有所帮助

样式变量未应用-车把

2 个答案: