I am trying to learn handlebars for use in my MVC app. I have the following in my template:

<div class="control-group">
<label class="control-label" for="EmailHtml">Html:</label>
<div class="controls">          
<textarea id="EmailHtml" name="EmailHtml" cols="36" rows="5"/>          
</div>
</div>

And here is the JSON:

{"data":{"Results":[{"EmailHtml":"xyz"}],"Name":"Test Business"}}

After executing the above I see a TextArea with the correct width and height, but I don't see any data in it.

I also tried inserting the value="{{this.EmailHtml}}" but it still doesn't work.

How I get the textarea to be populated in my template?

I am trying to learn handlebars for use in my MVC app. I have the following in my template:

<div class="control-group">
<label class="control-label" for="EmailHtml">Html:</label>
<div class="controls">          
<textarea id="EmailHtml" name="EmailHtml" cols="36" rows="5"/>          
</div>
</div>

And here is the JSON:

{"data":{"Results":[{"EmailHtml":"xyz"}],"Name":"Test Business"}}

After executing the above I see a TextArea with the correct width and height, but I don't see any data in it.

I also tried inserting the value="{{this.EmailHtml}}" but it still doesn't work.

How I get the textarea to be populated in my template?

• javascript
• jquery
• asp-mvc
• handlebars.js
• mustache

Share Improve this question Follow edited Jun 6, 2012 at 14:02 dotNetNewbie asked Jun 5, 2012 at 20:56 dotNetNewbiedotNetNewbie 79944 gold badges1717 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Shouldn't that be something more like:

<div class="control-group">
  <label class="control-label" for="EmailHtml">Html:</label>
  <div class="controls">          
    <textarea id="EmailHtml" name="EmailHtml" cols="36" rows="5">{{EmailHTML}}</textarea>          
  </div>
</div>

The value of a <textarea> is not in a value attribute, but resides between the tags. See: http://www.w3/TR/html401/interact/forms.html#h-17.7 , http://www.w3/TR/html-markup/textarea.html , among others.

With Handlebars you will want to use the unbounded helper so that you don't get the Handlebars marker elements inside your textarea.

<div class="control-group">
    <label class="control-label" for="EmailHtml">Html:</label>
    <div class="controls">          
        <textarea id="EmailHtml" name="EmailHtml" cols="36" rows="5">{{unbound EmailHTML}}</textarea>          
    </div>
</div>

Reference: Handlebars basics

Suppose you are keeping the handlebar html template in a variable tpl and the data in another varible. And then you're writting:-

HandleBars.pile( tpl )(data)

The in the handlebar template you've to write :-

<div class="control-group">
<label class="control-label" for="EmailHtml">Html:</label>
<div class="controls">          
    <textarea id="EmailHtml" name="EmailHtml" cols="36" rows="5">{{ data.Results.[1].EmailHtml}}</textarea>          
</div>
</div>