Forum | Appery.io

I have a working HTML and javascript. It implements Mustache.js. I have included Mustache JS in my external resources. I am trying to make information cards using a HTML UI peice. These cards should dynamically be filled with data using Mustache. Here is the example code I am using to test.
Here is what happens when you run it:
Here is the same code in appery.io:
When the app runs:
I am using the same external resource on Appery and JSFiddle:

Is there anyone who can help me figure out why the same implementation does not work in Appery? Thanks!

Hi Jess,

Please try to use "render" functionality on "page show" JS event handler.

Details: http://prntscr.com/5ptp23/direct

Regards.

I moved the code. So now in my HTML source I have:
script id="card-template" type="text/template"
{{title}}
script
(this html is not correct because it would not let me show the actual code. See JSfiddle for actual code in html source)

And on a page show event I have Run JavaScript:
alert(Mustache.render($('#card-template').html(), {title: "This is a card!"}));

This is the result:

This is the JSFiddle Result:

If mustache will not work in appery io for some reason, Is there another templating JavaScript engine that is known to work in appery?
Thanks!

I believe I found the problem. The problem is with how appery handles template script blocks. If you look at the html source everthing looks okay:

However, if you look at the source file for Startscreen.html you will see that appery is injecting spaces in the template script block which ruins the code. Is there any way to get around this and still be able to use the visual editor?:

The most recent example is using render.js. If left as is and tested it outputs the correct data but it leaves in the lable and break tags. If i edit the startscreen.html it works, however, I am no longer able to use the visual editor and the visual editor is why I am paying for appery and not some other framework.

I also tried a html with JavaScript template using underscore.js. The same problem still occurred. In the StartScreen.html file there were spaces added to the template code inside the script block

This post is marked as answered, just want to make sure someone is still working on it. Thanks

Hello Jess,

Sorry for delay, we are working on it and will get back to you with the update.

Thanks, appreciate it

Hi Jess,

Thanks for your patience.

Here is a solution to get it work in Appery.io.

1. Use following HTML code in HTML component:

   precode

   <div id="template" style="display: none;">
   Hello {{ name }}!
   <>

   /code/pre

   Details: http://prntscr.com/5reydm/direct

2. Use following JS code in "page show" JS event handler:

   pre

   var template = $('#template')&#46;html();
   Mustache&#46;parse(template); &#47;&#47; optional, speeds up future uses
   var rendered = Mustache&#46;render(template, {name: "Luke"});
   alert("rendered = " + rendered);

   /pre

   Details: http://prntscr.com/5rey4h/direct

   Regards.