Node-Red UI 模板：如何 "fix" 一个变量的值？

Question

经过多次尝试和在互联网上的研究（好吧，我是 HTML/Javascript 的新手），我设法以如下方式对 Node-Red UI-Dashboard 模板进行编码，当 msg.payload 的不同值被发送时， HTML 被更新并且变量 value 的值可以作为消息传递给另一个节点。但是我注意到，当发送具有不同结构的消息（例如 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>`

Answer 1

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

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

此外 context 用于服务器端而不是浏览器端，它在 Angular/HTML/CSS space.

中不起作用

Node-Red UI 模板：如何 "fix" 一个变量的值？

Node-Red UI Template: how to "fix" a value for a variable?

node-red