I am producing a webpage using mustache template -> uib-element ->uib-cache ->uibuilder
I first inject the mustache template (that contains some webpage content) with a payload set to 1. The mustache template swaps out the {{payload}} - so '<div class="box{{payload}}">' becomes'<div class="box1">'.
This produces my webpage. All good so far.
Now I inject for a second time a "2" - which creates a second <div class="box2"> div section on my webpage. Webpage looks and operates fine until I hit refresh. After refresh the page looks fine, however on closer examination both divs have a "box2" class designation.
To begin with I don't even know if I'm supposed to the inject twice to send changes to a webpage as I'm doing. If that is permitted, then you should know that actually the code traveling from my mustache template is actually pretty large, maybe 200 lines of code, with maybe 30 substitutions of {{payload}} with the number 1,2 and so on. So with several injections the webpage can get large, as each injection adds another 200 lines of code with each additional div.
Please let me know if what I'm doing is feasable. If so, is there anything I can do to correct this error? Right now my only remedy is to not hit refresh but instead abandon uib-cache, hit refresh followed by a re-injection to get a fresh webpage.
Each time you call uib-element, it replaces the element.
So you have called it a second time and overwritten the first. You have only specified a single value so that's what you get.
To use a single uib-element node, you must dynamically specify the element's html id so that each is different.
Then to use that with the uib-cache node, you should also dynamically set the msg.topic to something different for each element so that the output will be correctly cached.
You can do that as long as you follow the above.
That is fine because uibuilder is very much lighter in weight than either of the Dashboards. So you start from a better place.
Of course, if you are dynamically creating many 200 line HTML outputs, your web page will eventually start to slow down. I've dynamically created a table of over 10,000 entries for work and for testing. Tables are quite slow to render in browsers anyway and the rendering took a couple of seconds. But it worked just fine. That is roughly equivalent of 200 separate 200 line submissions so you should be fine as well.
Thanks for that response. OK - so I think I followed your remedy, but for some reason I am not there. Here is the output of a debug log - this is taken at the output of eib-element before it goes into the cache - for what it's worth, the class = 'code' is not one of the classes that has to change, it's just the beginning of my code clip. When I reload the classes are still being overwritten.
Not sure if it matters, but all along it appears some classes and parts of code are overwritten, and some are not. Even on a single line where 3 or 4 classes are defined, one it overwritten while another is not. Should I be clearing my browser cache maybe?
Also - I -do- have javascript in my webpage script which has variable changed by the injection of the {{payload}} - it that permitted?
See photo of log ;
OK. My attempt at posting a simplified flow of the problem showed me that the problem was in my hard-coded index.html file. Going back to my early learning of uibuilder I had the line <script src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script> in there. Taking it out solved the problem. Thank you for your help!
