Mustache not rendering in Pyramid

Question

I'm using mustache.js to render templates in a Pyramid/sqlalchemy project I'm working on, but they don't appear to render in the browser. I'm using Chrome's firebug lite and the developer console for debugging.

Here's the code I'm trying to use:

At the top, in the head

<script type="text/javascript" src="/static/mustache.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

In the body

$(document).ready(function () { 

$(document.body).append('<div id =\"user\">hello here is some stuff <br /></div>');

var person = {
"title" : "Herr Doktor Professor", 
"firstname": "Don",
"lastname": "Johnson"
};


console.log(person);
var template = '<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>';
console.log(template);
var user = Mustache.render(template, person);
console.log(user);
$('#user').append(user);
$(document.body).append(Mustache.render("{{title}} {{lastname}}", {title: "Doctor",     lastname: "Test"})); 
});

Here's the goofiness.. the HTML rendered gives me

<h1>Greetings,   </h1> 

Now...

console.log(person);
var template = '<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>';
console.log(template);

Yields in the console

Object {title: "Herr Doktor Professor", firstname: "Don", lastname: "Johnson"} 
<h1>Greetings,   </h1> 

Furthermore...

var user = Mustache.render(template, person);
console.log(user);

Gets me this:

<h1>Greetings,   </h1> 

The template literal on the last line seems to do nothing.

So here's where it gets really weird.. In the console itself, if I try this:

var template = '<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>';

I get this:

>template
"<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>"

Groovy! Now I do the following:

>var person = {
   "title" : "Herr Doktor Professor", 
   "firstname": "Don",
   "lastname": "Johnson"
  };

>person
Object {title: "Herr Doktor Professor", firstname: "Don", lastname: "Johnson"}
>var user = Mustache.render(template, person);
>user
"<h1>Greetings, Herr Doktor Professor Don Johnson</h1>"

Similarly the template literal on the last line of code seems to work just fine.

Any cluess as to why this seems to work well in the console and not at all in the browser?

Answer 1

Looks like your {{variable}} markup is getting interpreted by your server-side template engine first. Which one do you use? Jinja2?

To confirm - view the page source in your browser (Ctrl-U) and check if the {{variable}} thingies are present - most likely they won't be.

The solution is to minimize the amount of inline JavaScript you put in your HTML pages - a couple of lines of configuration is ok, anything more than that belongs to a separate file. Otherwise you're generating JavaScript from a server-side template, the JavaScript generates a Moustache template which in turn generates HTML... just to many layers