在车把中分配一个变量答案

【问题标题】：assign a variable in handlebars在车把中分配一个变量
【发布时间】：2017-12-27 16:53:40
【问题描述】：

我正在开发大型商业模板平台。该平台使用车把语法。我需要能够根据我的 URL 中的一个参数设置一个值，更像是“window.location.pathname”，并且我需要能够跨站点访问这个新变量。我可以使用常规 JavaScript 以两种不同的方式使某些东西工作，但我不想在整个站点的每个地方重新创建我的脚本。所以基本上，我可以使用一些帮助将我的 2 个香草脚本之一放入把手中进行格式化。我所拥有的作品如下所示：

<p id="BrandLogo"></p>
<script>
    var directory = window.location.pathname;
    var branding;
    var str = directory.includes("blackvue");
    if (str === false) {
        branding = value one;
    } else {
        branding = value 2
    }
    document.getElementById("BrandLogo").innerHTML = branding;
</script>

或

<p id="BrandLogo"></p>
<script>
    var directory = window.location.pathname;
    var branding;
    if (str == '/URL-I-Want-To-Focus-On/') {
        branding = value one;
    } else {
        branding = value 2
    }
    document.getElementById("BrandLogo").innerHTML = branding;
</script>

提前致谢

【问题讨论】：

如果您向我们展示您是如何使用 Handlebars 的，这可能会有所帮助。
@76484 它被一家 SaaS 公司用作模板引擎。车把的实现不在 dlavely 的控制范围内
您希望它出现在车把中的任何特殊原因？这个脚本看起来可以在客户端使用模板。
它将在 Stencil 中使用，并且该脚本将在客户端工作，但是我希望能够在“全局”级别上实现一些东西，因为我想更改页面上的多个元素。首先，它是在模板系统中使用的，它不在我的控制范围内

标签： javascript handlebars.js bigcommerce

【解决方案1】：

如果您尝试在车把中设置和使用局部变量，请尝试以下操作：

首先，创建一个名为“setVar”的辅助函数：

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

接下来，使用您在第一步中创建的函数设置变量。

{{setVar "greeting" "Hello World!"}}
{{#if some-condition}}
    {{setVar "branding" "Value one"}}
{{else}}
    {{setVar "branding" "Value 2"}}
{{/if}}

最后，使用页面上的变量：

<div>
  <h1 id="BrandLogo">{{greeting}}</h1>
</div>

document.getElementById("BrandLogo").innerHTML = {{branding}};

【讨论】：

所以，基本上，您建议不要使用局部变量，而是将值存储在封装的 options.data.root[..] 中，我正在寻找一种在 Handlebars.js 中定义局部变量的方法