首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Node-Red UI模板:如何“修复”变量的值?

Node-Red UI模板:如何“修复”变量的值?
EN

Stack Overflow用户
提问于 2018-07-08 23:41:11
回答 1查看 1.4K关注 0票数 0

在互联网上经过多次尝试和几个小时的研究(好吧,我对HTML /Javascript是个新手),我设法编写了下面的Node-Red UI-Dashboard模板,当发送不同的msg.payload值时,HTML会更新,变量value的值可以作为mmessage传递给另一个节点。然而,我注意到,当发送具有不同结构的消息(例如msg.host)并且在浏览器中刷新UI-Dashboard时,变量value消失了。那么,我如何修复IST值,以便只有当新的msg.payload传入变量value时才会更新?

代码语言:javascript
复制
<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流程:

代码语言:javascript
复制
[{"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>

代码语言:javascript
复制
`<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>`
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-10 02:22:02

正确的方法是过滤模板节点的输入,这样没有msg.payload值的消息就不会重置它的内部状态。

如果您仍然需要在模板节点下游使用这些其他消息,那么您可以使用类似于switch节点的东西在模板节点周围路由消息。

此外,context是针对服务器端的,而不是浏览器端的,它不能在Angular/HTML/CSS空间中工作。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51233596

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档