Implementation of Mustache.js

Wed Jan 07, 2015 10:35 pm

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!

Thu Jan 08, 2015 4:27 am

Hi Jess,

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

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

Regards.

Thu Jan 08, 2015 3:04 pm

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!

Thu Jan 08, 2015 4:18 pm

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?:

Thu Jan 08, 2015 4:21 pm

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.

Thu Jan 08, 2015 8:26 pm

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

Thu Jan 08, 2015 9:07 pm

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

Thu Jan 08, 2015 9:13 pm

Hello Jess,

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

Fri Jan 09, 2015 3:05 pm

Thanks, appreciate it

Mon Jan 12, 2015 1:36 am

Hi Jess,

Thanks for your patience.

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

Use following HTML code in HTML component:

precode

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

/code/pre

Details: http://prntscr.com/5reydm/direct
Use following JS code in "page show" JS event handler:

pre

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

/pre

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

Regards.