在Handlebars中分配一个变量。

Question

我正在使用大商家上的模板平台，该平台使用Handlebars语法。我需要能够根据URL中的参数之一设置一个值，类似于“window.location.pathname”，并且我需要能够在整个站点范围内访问这个新变量。我可以使用常规JavaScript的两种不同方法使某些东西工作，但我不想在整个站点的每个地方重新创建我的脚本。因此，基本上，我需要帮助将我的两个普通脚本之一放入Handlebars中进行格式化。下面是我现在可用的内容：

<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>

提前感谢

- dlavely

---

如果您展示一下如何使用Handlebars，可能会有所帮助。 - 76484

@76484 它被一家 SaaS 公司用作模板引擎。Handlebars 的实现不在 dlavely 的控制范围内。 - Alyss

您想用 Handlebars 有什么特别的原因吗？这个脚本看起来像是适用于Stencil的客户端。 - Alyss

它将在Stencil内使用，这个脚本将在客户端工作，但我希望有一个可以在“全局”级别实现的东西，因为我想更改页面上的多个元素。 至于你的第一个观点，它正在被用于一个模板系统中，而且它不在我的控制之下。 - dlavely

Answer 1

如果您正在尝试在handlebars中设置和使用本地变量，请尝试以下方法：

首先，创建一个名为“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}};

- Dan King

---

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

不起作用（至少对于我的版本）。它确实完成了工作：Handlebars.registerHelper('var',function(name, value, context){ this[name] = value; }); 在 https://jsfiddle.net/ceej/QUQ82/ 中看到。 - Fernando

Answer 2

如果您想在嵌套的“each”中添加序列号，或者基于嵌套的每个内部条件，则以下帮助程序可以正常运行：

hbs.registerHelper('serialNo', function (options) {
  var currentSerialNo = options.data.root['serialNo'];
  console.log("############Current serial No is:"+currentSerialNo);
  if (currentSerialNo === undefined) {
    currentSerialNo = 1;  
  } else {
    currentSerialNo++;
  }

  options.data.root['serialNo'] = currentSerialNo;
  return currentSerialNo;
});

现在，在您的模板中，您可以简单地像这样使用它：

{{serialNo}}

每次遇到 {{serialNo}}，都会打印一个比之前大1的序列号。

- Bakavani