Node-RED UI模板中标签内动态数据处理指南-js教程-PHP中文网

Node-RED UI模板中标签内动态数据处理指南

花韻仙語

发布： 2025-11-20 21:38:02

原创

184人浏览过

浏览器端加载时），它主要用于将msg对象的属性值插入到HTML内容或JavaScript变量的定义中。

浏览器端JavaScript执行： <script>标签内的JavaScript代码在浏览器加载并解析HTML后执行。这是一个独立的客户端执行环境，它与Mustache模板引擎的处理是两个不同的阶段。

这意味着，Mustache引擎会将{{...}}替换为字符串，然后浏览器再尝试执行替换后的JavaScript代码。

为何直接注入代码块不可行（或不推荐）

用户尝试使用{{msg.payload.ranges1}}来替换多行JavaScript变量赋值：

} else if ($scope.msg.topic === "temperature_avg") {
    // 期望此处能动态生成 high = 88; mid = 65; low = 60; size= "0.9em";
    {{msg.payload.ranges1}} 
}

登录后复制

这种做法通常无法按预期工作，原因如下：

对象到字符串的转换： 如果msg.payload.ranges1是一个JavaScript对象（例如{high: 88, mid: 65, low: 60, size: "0.9em"}），Mustache引擎在将其插入到JavaScript代码中时，会将其转换为字符串[object Object]。这在JavaScript中不是有效的变量赋值语句，会导致运行时错误。
代码注入风险： 即使msg.payload.ranges1包含一个有效的JavaScript代码字符串（例如"high = 88; mid = 65; low = 60; size= '0.9em';"），直接通过Mustache注入并执行也极不推荐。这构成了一个严重的安全漏洞（跨站脚本攻击 XSS），因为恶意用户可以通过发送特制的消息来执行任意JavaScript代码。此外，这种方式也难以维护和调试。
非动态更新： Mustache渲染通常在模板加载时进行一次。如果希望脚本内的变量能响应Node-RED流中后续消息的更新，直接的Mustache注入无法实现这种动态行为。

推荐方案：通过$scope对象访问msg数据

Node-RED UI模板基于AngularJS，提供了一个$scope对象，它是AngularJS控制器和视图之间的数据绑定桥梁。通过$scope.msg，你可以在JavaScript代码中安全、动态地访问传入的Node-RED消息对象。为了响应消息的更新，我们使用$scope.$watch来监听$scope.msg的变化。

以下是实现动态变量赋值的推荐方法：

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

监听$scope.msg的变化： 使用$scope.$watch('msg', function() { ... })来确保每次有新消息到达时，脚本内的逻辑都能被重新执行。
安全访问msg属性： 在$scope.$watch回调函数中，通过$scope.msg.payload.ranges1安全地访问数据。
提取并使用变量： 从ranges1对象中提取所需的high, mid, low, size等变量，并提供默认值以增加健壮性。

示例代码：

假设你的Node-RED流发送的消息结构如下：

msg.topic = "temperature_avg";
msg.payload = {
    ranges1: {
        high: 95,
        mid: 70,
        low: 55,
        size: "1.2em"
    }
};
return msg;

登录后复制

UI模板节点中的JavaScript部分应这样编写：

<script>
(function($scope) {
    // 使用 $scope.$watch 监听 $scope.msg 的变化
    // 确保每次新消息到来时都能更新数据
    $scope.$watch('msg', function() {
        // 检查 msg 对象是否存在且 topic 匹配
        if ($scope.msg && $scope.msg.topic === "temperature_avg") {
            // 确保 payload 和 ranges1 属性存在
            if ($scope.msg.payload && $scope.msg.payload.ranges1) {
                // 从 msg.payload.ranges1 中安全地获取变量
                let ranges = $scope.msg.payload.ranges1;
                let high = ranges.high || 88; // 提供默认值，防止属性缺失
                let mid = ranges.mid || 65;
                let low = ranges.low || 60;
                let size = ranges.size || "0.9em"; // 确保字符串类型，并提供默认值

                // 在这里使用 high, mid, low, size 变量执行你的逻辑
                console.log("动态温度范围设置:", { high, mid, low, size });

                // 示例：更新UI元素或执行其他计算
                // 如果你的UI元素绑定到 $scope 上的变量，可以这样更新：
                // $scope.currentHigh = high;
                // $scope.currentMid = mid;
                // $scope.currentLow = low;
                // $scope.currentSize = size;

            } else {
                console.warn("msg.payload.ranges1 不存在或为空，使用默认值。");
                // 可以在此处设置默认值，或者使用之前定义的默认值
                let high = 88;
                let mid = 65;
                let low = 60;
                let size = "0.9em";
                console.log("使用默认温度范围设置:", { high, mid, low, size });
            }
        }
    });
})(scope);
</script>

登录后复制

Node-RED流程示例 (用于测试上述UI模板):

拖入一个 inject 节点。
拖入一个 function 节点，并连接到 inject 节点。
拖入一个 ui_template 节点（选择“Template”类型），并连接到 function 节点。
拖入一个 debug 节点（连接到 ui_template 节点，可选）。

function 节点代码：

// 模拟发送带有动态数据的消息
msg.topic = "temperature_avg";
msg.payload = {
    ranges1: {
        high: Math.floor(Math.random() * (100 - 80 + 1)) + 80, // 80-100
        mid: Math.floor(Math.random() * (75 - 55 + 1)) + 55,  // 55-75
        low: Math.floor(Math.random() * (60 - 40 + 1)) + 40,

登录后复制

以上就是Node-RED UI模板中标签内动态数据处理指南的详细内容，更多请关注php中文网其它相关文章！