javascript - JS 无法识别 Freemarker 变量

Question

我的 Freemarker 模板中有这段代码:

<form>
  <#list elements as product>           
    <input id="${product.buyLink}" type="checkbox" onClick="addToCart()" /><#if product.title??>${product.title}</#if> - <#if product.price??>${package.price}<#else>missing price</#if><br />
    <script src="/assets/js/addToCart.js" type="text/javascript"></script>
  </#list>
</form>

我的 addToCart.js 看起来像这样:

function addToCart() {
   if (document.getElementById("${product.buyLink}").checked == true) {
        console.log("Product removed from cart.")
   } else {
        console.log("Product addded into cart.")
   }
}

当我运行此代码时，Chrome 开发工具不断显示此错误消息:

Uncaught TypeError: Cannot read property 'checked' of null

另外，我认为有必要说我的变量 ${product.buyLink} 是一个包含许多反斜杠的字符串 - 例如它可以如下所示:"db/45493/t/524s"。我还尝试在 JS 脚本顶部使用 console.log("${package.buyLink}"); ，它返回了 ${package.buyLink}。

所以，我的 JS 脚本似乎根本不知道 ${product.buyLink} 或者认为它等于 null。到底哪里出了错误，我做错了什么？

Answer 1

JavaScript 在客户端上运行，FreeMarker 在服务器上运行。这是一个例子:

如您所见，互联网将您的 JavaScript 代码与 ${product.buyLink} 分开。这是由 FreeMarker 在服务器上处理的内容。您需要将代码从 addToCart.js 移至 <script> 内FreeMarker 模板的标签或从 addToCart.js 创建一个新模板并在将其返回到浏览器之前处理该模板。

为了确保一切都清楚，您的目标是处理 ${product.buyLink}在服务器上，浏览器中运行的 JavaScript 必须具有 db/45493/t/524s已经在其中，JavaScript 在您的浏览器中运行，并且不知道什么 ${product.buyLink}是。