Question

这是我的功能节点：

var myfoo1 = global.get("v1");
var myfoo2 = global.get("v2");
msg.payload=[myfoo1,myfoo2];
//myfoo1 is an array of objects
//myfoo2 is also an array of objects
return msg;

这是我的模板UI节点：

<html>
    <body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: myfoo1, //Don't work myfoo1
        datasets: [{
            label: '# of',
            data: myfoo2,//Don't work myfoo2
            borderWidth: 1
        }]
    },
});
</script>
</body>
</html>

在我的模板UI节点中，我将使用功能节点的数组吗？

Answer 1

请记住，模板节点只渲染一次，然后将在以后从功能节点接收消息。模板首次呈现时，您的myfoo1和myfoo2变量甚至都不存在。

您的模板需要监视那些消息的到达，然后在每次发生时更新其UI。模板节点的文档面板中有此过程的示例：

<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">
  Some text
</div>

<script>
console.log("ID",scope.$id);
console.log("THEME",scope.theme);
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);
</script>

通过使用此方法监视来自功能节点的传入消息，您可以每次访问新数据时，参考msg.myfoo1或msg.myfoo2更新图表。

Node-RED中的模板UI和变量

1 个答案: