JS 不识别 Freemarker 变量

JS doesn´t recognize Freemarker variables

我的 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"。我还尝试 console.log("${package.buyLink}"); 在我的 JS 脚本的顶部,它返回 ${package.buyLink}.

因此,tt 似乎我的 JS 脚本根本不知道 ${product.buyLink} 或认为它等于 null。到底哪里出错了,我哪里做错了?

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

如您所见,Internet 将您的 JavaScript 代码与 ${product.buyLink} 分开由 服务器 上的 FreeMarker 处理。您需要将代码从 addToCart.js 移动到 FreeMarker 模板的 <script> 标签内,或者从 [=38= 创建一个新模板] 并在将模板 return 发送到浏览器之前对其进行处理。

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