【问题标题】:Node Red Dashboard - Insert In List On Mqtt request节点红色仪表板 - 在 Mqtt 请求时插入列表
【发布时间】:2017-10-19 07:45:44
【问题描述】:

我在 node-red 浏览器 ide 上有一个 mqtt 节点,它正在侦听有关某个主题的传入消息。

我想用该信息在 node-red-dashboard 中填写一个列表,所以我添加了一个具有该格式的模板节点:

<ul id="messagesList"></ul>

我不仅想添加可以通过角度绑定完成的信息,我还想删除旧条目,以便表中最多包含 3 条消息。所以我需要在每条可以访问仪表板页面的传入消息上运行 javascript。

我怎样才能做到这一点?每次收到消息时,如何运行 javascript 并访问 html 页面?

【问题讨论】:

    标签: node-red


    【解决方案1】:

    添加一个功能节点,将消息存储在流上下文中。

    var message = msg.payload;
    var messages = flow.get("messagesList") || [];
    
    if(messages.length < 3) {
    
      //Push to message list
      messages.push(message);
    } else {
    
      //Remove first message and add new one
      messages.splice(0,1);
      messages.push(message);
    }
    
    flow.set("messagesList", messages);
    
    msg.payload = messages;
    return msg;
    

    在 dahsboard 模板节点中,使用 ng-repeat 显示你的列表,例如:

    <ul id="messagesList">
      <li ng-repeat="x in msg.payload">{{x}}</li>
    </ul>
    

    工作示例:

    [{"id":"5c713e84.dacb98","type":"function","z":"47849408.20a044","name":"","func":"var message = msg.payload;\nvar messages = flow.get(\"messagesList\") || [];\n\nif(messages.length < 3) {\n\n  //Push to message list\n  messages.push(message);\n} else {\n\n  //Remove first message and add new one\n  messages.splice(0,1);\n  messages.push(message);\n}\n\nflow.set(\"messagesList\", messages);\n\nmsg.payload = messages;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":500,"wires":[["e6bdd32f.ec218"]]},{"id":"e6bdd32f.ec218","type":"ui_template","z":"47849408.20a044","group":"77d3195c.d9af28","name":"","order":0,"width":0,"height":0,"format":"<ul id=\"messagesList\">\n  <li ng-repeat=\"x in msg.payload\">{{x}}</li>\n</ul>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":500,"wires":[[]]},{"id":"87e7fba4.ccfa6","type":"inject","z":"47849408.20a044","name":"","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":false,"x":150,"y":500,"wires":[["5c713e84.dacb98"]]},{"id":"77d3195c.d9af28","type":"ui_group","z":"","name":"Sensors","tab":"cd626a92.d20a78","disp":true,"width":"9"},{"id":"cd626a92.d20a78","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard"}]
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-11-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多