如何在Node-RED UI模板的<script>中使用Mustache语法

你遇到的问题是因为Node-RED UI模板里的{{}}插值语法只在HTML内容中生效，<script>标签内的JavaScript代码不会解析这种模板语法，直接写{{msg.payload.ranges1}}会导致语法错误。

正确的做法是直接通过$scope.msg对象访问传递过来的变量，步骤如下：

1. 确保上游节点传递的msg.payload.ranges1是一个结构完整的对象，比如：

   // 上游function节点示例代码
   msg.payload.ranges1 = {
       high: 88,
       mid: 65,
       low: 60,
       size: "0.9em"
   };
   return msg;
   

2. 修改UI模板节点中的if语句，用JavaScript语法直接提取变量：

   } else if ($scope.msg.topic === "temperature_avg") {
       // 解构赋值快速获取所有变量
       const { high, mid, low, size } = $scope.msg.payload.ranges1;
       // 或者逐个赋值
       // high = $scope.msg.payload.ranges1.high;
       // mid = $scope.msg.payload.ranges1.mid;
       // low = $scope.msg.payload.ranges1.low;
       // size = $scope.msg.payload.ranges1.size;
   }
   

3. （可选）为了避免ranges1不存在导致报错，可添加存在性判断：

   } else if ($scope.msg.topic === "temperature_avg" && $scope.msg.payload?.ranges1) {
       const { high, mid, low, size } = $scope.msg.payload.ranges1;
       // 后续使用变量的逻辑
   }
   

这样就能正常从msg.payload.ranges1中获取变量，替代原来的硬编码值。

内容的提问来源于stack exchange，提问作者user5531485