var template = Mustachepile("{{#list}}<option value=\"{{&0}}\">{{&0}}</option>{{/list}}");

var view = { list: ["1.0", "2.0"] };

var output = template(view);

In the above snippet the numbers output in to HTML are 'prettified' i.e.

"1.0" => 1
"2.0" => 2

It is important to the application that these numbers are printed exactly as received. The items going in to the list may not always be numbers or have the same number of decimal places.

How can I force them to be printed as received/treated as Strings?

Note - I have also used the unescape tag (&) Note - I have tried re-declaring them as Strings but JS still interprets them as Numbers when rendered i.e.

var view = { list: [new String("1.0"), new String("2.0")] };

var template = Mustache.pile("{{#list}}<option value=\"{{&0}}\">{{&0}}</option>{{/list}}");

var view = { list: ["1.0", "2.0"] };

var output = template(view);

In the above snippet the numbers output in to HTML are 'prettified' i.e.

"1.0" => 1
"2.0" => 2

It is important to the application that these numbers are printed exactly as received. The items going in to the list may not always be numbers or have the same number of decimal places.

How can I force them to be printed as received/treated as Strings?

Note - I have also used the unescape tag (&) Note - I have tried re-declaring them as Strings but JS still interprets them as Numbers when rendered i.e.

var view = { list: [new String("1.0"), new String("2.0")] };

• javascript
• mustache

2 Answers 2

Your template is just a little off. Try using {{.}} instead of {{0}} or {{&0}} to refer to the current element as a string.

var template = Mustache.pile("{{#list}}<option value=\"{{.}}\">{{.}}</option>{{/list}}");

Here is a jsFiddle to demonstrate: Fiddle

As per the Mustache spec, {{.}} will identify the current element in the iteration and should cast decimals as strings. In your case you start with strings, which is indeed necessary to retain the decimal with a 0 digit (1.0 === 1).

Mustache spec (~line 157): sections.yml

I'm unfamiliar with using {{0}} instead, but clearly it behaves a little differently. I didn't find anything in the spec regarding its usage.

The escaping you tried should only be necessary when dealing with HTML.

I hope that helps!

{{0}} (or {{&0}} for that matter) isn't doing something strange because of an encoding or conversion issue, it's doing something strange because you asked it to :)

In Mustache, lookups are tried first against the current scope, then against the parent scope, and all the way up the stack.

Given this data:

{list: ["1.0", "2.0"]}

And this Mustache template:

{{# list }}{{ 0 }}{{/ list }}

Your rendering context stack starts out as:

[
  {list: ["1.0", "2.0"]}
]

But as soon as you enter that {{# list }} section, and it starts iterating over the list items, the context stack is:

[
  {list: ["1.0", "2.0"]}, // same as before
  "1.0"                   // or, "2.0" in the second trip through the loop...
]

So any tag inside the section will be tried against the "1.0" first, and if that's unsuccessful, will be tried against the {list: ["1.0", "2.0"]}. So really, what your {{&0}} meant was "1.0"[0] and "2.0"[0]...

Which, of course, evaluates to "1" and "2".