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在服务器上处理。您需要从FreeMarker模板的<script>标记内移动 addToCart.js 中的代码，或者从 addToCart.js 创建新模板并处理模板在将其返回浏览器之前。

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