Handlebars和textarea

Question

我正在尝试学习Handlebars，以便在我的MVC应用程序中使用。我在模板中有以下内容：

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

以下是JSON代码：

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

执行上述代码后，我看到一个宽高正确的文本区域，但在其中并没有看到任何数据。

我还尝试插入value="{{this.EmailHtml}}"，但仍然无法解决问题。

我该如何在模板中填充文本区域呢？

- dotNetNewbie

Answer 1

这句话的意思应该更像是：

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

<textarea> 元素的值不在 value 属性中，而是在标签之间。请参见：http://www.w3.org/TR/html401/interact/forms.html#h-17.7，http://www.w3.org/TR/html-markup/textarea.html 等。

- artlung

---

我可以确认@artlung的答案。我自己也遇到了同样的问题。当我使用<textarea id="description" value="{{description}}" name="description" cols="36" rows="5"></textarea>时，输入字段内没有任何内容被呈现。但是如果我将变量放置在<textarea></textarea>之间，它就有效了。 - AllJs

Answer 2

使用Handlebars时，您需要使用无边界的helper，以便在文本区域内不会出现Handlebars标记元素。

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

参考资料：Handlebars 基础

- Sean Keating

Answer 3

假设您将手柄HTML模板保存在变量tpl中，数据保存在另一个变量中。然后您编写：

HandleBars.compile( tpl )(data)

在 handlebar 模板中，你需要编写：

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

- Indranil Mondal