在互联网上经过多次尝试和几个小时的研究(好吧,我对HTML /Javascript是个新手),我设法编写了下面的Node-Red UI-Dashboard模板,当发送不同的msg.payload
值时,HTML会更新,变量value
的值可以作为mmessage传递给另一个节点。然而,我注意到,当发送具有不同结构的消息(例如msg.host
)并且在浏览器中刷新UI-Dashboard时,变量value
消失了。那么,我如何修复IST值,以便只有当新的msg.payload
传入变量value
时才会更新?
<div>{{value}}</div><br>
<md-button ng-click="send({payload:action()})">
Click me to send a message
</md-button>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload) {
scope.value = msg.payload;
}
scope.action = function() {
return scope.value;
}
});
})(scope);
</script>
任何帮助都是非常有用的!下面是Node-Red流程:
[{"id":"3f23f703.42bea8","type":"ui_template","z":"66b95f66.704eb","group":"b95933b3.c8423","name":"","order":0,"width":"6","height":"3","format":"<div>{{value}}</div><br>\n\n<md-button ng-click=\"send({payload:action()})\">\n Click me to send a message\n</md-button>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg.payload) {\n\t scope.value = msg.payload;\n\t}\n scope.action = function() {\n return scope.value;\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":320,"y":1440,"wires":[["2c92bfb9.3b913"]]},{"id":"2c92bfb9.3b913","type":"debug","z":"66b95f66.704eb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":490,"y":1440,"wires":[]},{"id":"52897833.650b18","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"boat","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1440,"wires":[["3f23f703.42bea8"]]},{"id":"b4427fff.dd20b","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"house","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1480,"wires":[["3f23f703.42bea8"]]},{"id":"505e7106.a90bc","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"car","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1520,"wires":[["3f23f703.42bea8"]]},{"id":"f0f33fe9.21da5","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"500","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1560,"wires":[["3f23f703.42bea8"]]},{"id":"f857f83f.7d2108","type":"function","z":"66b95f66.704eb","name":"test msg","func":"var servers = {\n host: 'localhost',\n port: 6680,\n};\nreturn [servers];","outputs":1,"noerr":0,"x":320,"y":1380,"wires":[["3f23f703.42bea8"]]},{"id":"1ee40d04.3106d3","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":1380,"wires":[["f857f83f.7d2108"]]},{"id":"b95933b3.c8423","type":"ui_group","z":"","name":"Group 2","tab":"f04b5dc7.38763","order":2,"disp":false,"width":"6","collapse":false},{"id":"f04b5dc7.38763","type":"ui_tab","z":"66b95f66.704eb","name":"New Test","icon":"dashboard"}]
经过更多的研究后,我发现我正在寻找在获得新消息或浏览器刷新后保留变量的值:localStorage
。以下是更新后的<script>
`<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload.image) {
localStorage.setItem("image", msg.payload.image);
}
if (msg.payload.text) {
localStorage.setItem("text", msg.payload.text);
}
if (msg.payload.volume) {
localStorage.setItem("volume", msg.payload.volume);
}
scope.action = function() {
return [value, host];
}
scope.image = localStorage.getItem("image");
scope.text = localStorage.getItem("text");
scope.volume = localStorage.getItem("volume");
});
})(scope);
</script>`
发布于 2018-07-10 02:22:02
正确的方法是过滤模板节点的输入,这样没有msg.payload
值的消息就不会重置它的内部状态。
如果您仍然需要在模板节点下游使用这些其他消息,那么您可以使用类似于switch
节点的东西在模板节点周围路由消息。
此外,context
是针对服务器端的,而不是浏览器端的,它不能在Angular/HTML/CSS空间中工作。
https://stackoverflow.com/questions/51233596
复制相似问题