For-Each Loop in TextArea

Question

When I tried to use a Handlebars ForEach-loop within a plain HTML textarea, I encountered some to me unexpected behaviour.

First let me show you my code:

My template.html:

<template name="test">
  <textarea>
    {{#each array}}
      {{this}}
    {{/each}}
  </textarea>
</template>

My template.js:

Template.test.array = function(){
    return ["String1", "String2", "String3"];
}

The Problem:

I actually expected some output that looks like that:

String1 
String2 
String3

Instead I got this:

<!--data:46XrgsL9aX8aCa3Ek-->
<!--data:tu6FiCxRraSLoh2w9-->
<!--data:5h3PkyB66dHw4zrWF-->

As a workaround I used a Handlebars helper and manipulated the value of the textarea utilizing jQuery, which worked perfectly.

Still I would like to get some clarification about this case:

1. Why don't I get the expected output? If I use the loop outside of the textarea, it prints the Strings properly.
2. What are these Strings? JavaScript's internal object-IDs or the like?

Every little help is appreciated!

Answer 1

These strings look like Spark landmarks. This is weird, but may be fixed in the rewrite of the rendering engine in the next Meteor release.

This may be related to an issue when a string literal as passed as the context to a helper; it gets turned into an object.

https://github.com/meteor/meteor/issues/1447

One way to go back to a string literal is to write a helper. Instead of {{this}}, write {{printString}}, and define

Template.test.printString = function() { return "" + this; }