NVelocity 模板引擎與 JavaScript 混用衝突的解決策略：數據分離

衝突原因

NVelocity 是服務端模板引擎，語法如 #if()、#foreach()；JavaScript 是客服端腳本，也使用 if、for 關鍵字。在 .vm 文件中直接編寫 JS 邏輯會導致模板引擎誤解析或語法錯誤。

錯誤示例

<script>
#foreach($row in $Data.testData)
#if($row.TestType == $selectedType)
    n.options.add(new Option(...));
#end
#end
</script>

正確做法：數據序列化到 JS 變量

<script>
// 1. 後端將數據序列化為 JSON 注入頁面
var testData = $jsonTool.toJson($Data.testData); // 需在 Velocity 上下文放入 jsonTool

// 2. 純 JS 邏輯處理
function GetTestType() {
    var selectedType = document.getElementById("testType").value;
    var n = document.getElementById("testName");
    n.innerHTML = ''; // 清空
    testData.forEach(function(row) {
        if (row.TestType == selectedType) {
            n.options.add(new Option(row.TestName, row.Id));
        }
    });
}
</script>

關鍵點

• Velocity 僅負責輸出初始數據（JSON 字符串）。
• 所有交互邏輯、條件判斷、循環全部在 JavaScript 中完成。
• 避免模板語法與 JS 語法混寫，消除衝突根源。

補充

若項目無 JSON 工具，可自定義 Velocity 宏輸出 JS 數組字面量，或改用現代前後端分離架構（API + Vue/React）。