Mustache on external js file

Hi all,
So I am using Mustache for some stuff off the JS. In a script tag inside the HTML is working but if I use it with an external JS file it isn't. Is there any way to make it work with external JS file?

Thanks!

Hi @tukru - can you describe a bit more about what you are trying to do? Where does Node-RED fit in with it?

Hi @knolleary
What I mean is: I have some code that I need to be executed only if exists some parameters in the payload.
Example:

<script>
{{#admin}}
Execute some code with some data from payload
{{/admin}}
</script>

In the in page script is working without problems but in the other hand, in an external JS file added with script tag it doesn't work.

So is that example in a Template node? If not, how are you using mustache?

How is the external JS file loaded?

Yes, is a Template node.
The external JS file is loaded with an script tag like:

<script src="/js/custom.js"></script>

And the custom file is inside the pi, loaded using httpStatic .

The mustache functionality is specific to the Template node. It uses the template you provide to generate the text it passes on - which may be HTML, CSS, JavaScript - anything really.

Loading an external file via a script tag is done entirely in the browser - Node-RED doesn't get involved at all. There is no support for using mustache in javascript files loaded by the browser.

If you wanted to do that, you'd need to create a new HTTP end point in your node-red flow that serves up that custom.js content - which can then come from a Template node and generate whatever you want.

Ok, all clear. So I will have to separate the payload I need for the HTML and the payload I need for the JS or do the same query 2 times. Maybe I will leave the code I need with payload inside the script like I have right now.

Thanks for all!

You could try putting your script in a file on the device running NR then use a file-in node to read the file, a change node to move it to msg.template and then send that to the ui-template node.

Here is an example using the first example in the ui_template node. You need to copy that example to a file and point the file-in node at that file.

[{"id":"979f0724.971cd8","type":"debug","z":"ba53629d.ec0638","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":310,"y":240,"wires":[]},{"id":"a86875a2.4e1588","type":"ui_template","z":"ba53629d.ec0638","group":"9ebac909.a8afb8","name":"","order":1,"width":0,"height":0,"format":"<div layout=\"row\" layout-align=\"space-between\">\n  <p>The number is</p>\n  <font color=\"{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}\">\n    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}\n  </font>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":320,"y":200,"wires":[["979f0724.971cd8"]]},{"id":"91ba7c8f.8f0e7","type":"file in","z":"ba53629d.ec0638","name":"","filename":"/Users/Paul/tmp/template_test.txt","format":"utf8","chunk":false,"sendError":false,"encoding":"none","x":400,"y":120,"wires":[["c1cf44b9.69ef8"]]},{"id":"c1cf44b9.69ef8","type":"change","z":"ba53629d.ec0638","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"template","tot":"msg"},{"t":"move","p":"value","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":160,"wires":[["a86875a2.4e1588"]]},{"id":"42277292.282c64","type":"change","z":"ba53629d.ec0638","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"value","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":80,"wires":[["91ba7c8f.8f0e7"]]},{"id":"7d10621b.fdc9c4","type":"ui_button","z":"ba53629d.ec0638","name":"","group":"9ebac909.a8afb8","order":3,"width":0,"height":0,"passthru":false,"label":"button 6","tooltip":"","color":"","bgcolor":"","icon":"","payload":"6","payloadType":"num","topic":"","x":100,"y":100,"wires":[["7b73700.1301d1","42277292.282c64"]]},{"id":"3ace5a14.979716","type":"ui_button","z":"ba53629d.ec0638","name":"","group":"9ebac909.a8afb8","order":2,"width":0,"height":0,"passthru":false,"label":"button 5","tooltip":"","color":"","bgcolor":"","icon":"","payload":"5","payloadType":"num","topic":"","x":100,"y":60,"wires":[["7b73700.1301d1","42277292.282c64"]]},{"id":"9ebac909.a8afb8","type":"ui_group","z":"","name":"Group 1","tab":"77d04ed1.91ec5","order":1,"disp":true,"width":"6","collapse":false},{"id":"77d04ed1.91ec5","type":"ui_tab","z":"","name":"Mustache test","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.