这是我的功能节点：
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节点中，我会使用我的函数节点的数组？
请记住，您的模板节点将呈现一次，然后将从您的功能节点接收消息。首次渲染模板时，您的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来更新图表。