javascript - 使用带有 <input> 标签的 Handlebars 时出现空白问题

Question

我正在使用 Handlebars 在输入中设置默认值，它看起来像这样。

        <div class="form-group" id="eventDead">
            <label for="eventDead">Event Deadline</label>
            <input class="form-control" type="text" name="eventDead" id="eventDead" value={{this.eventDeadline}} readonly/>
        </div>

问题是，如果值 eventDeadline="I Want to Host Something",

页面上的输出是“I”，仅添加空格之前的第一个单词。 如何解决这个问题？

演示如下:

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
var context = {eventDeadline: "You want to host something"}
var html = template(context)
$("#value").html(html)

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script id="entry-template" type="text/x-handlebars-template">
            <div class="form-group" id="eventDead">
                <label for="eventDead">Event Deadline</label>
                <input class="form-control" type="text" name="eventDead" id="eventDead" value={{this.eventDeadline}} readonly/>
            </div>
</script>
<div id="value"></div>

Answer 1

这是工作代码。像这样更改您的输入值标签

value="{{this.eventDeadline}}"

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
var context = {eventDeadline: "You want to host something"}
var html = template(context)
$("#value").html(html)

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script id="entry-template" type="text/x-handlebars-template">
            <div class="form-group" id="eventDead">
                <label for="eventDead">Event Deadline</label>
                <input class="form-control" type="text" name="eventDead" id="eventDead"  value="{{this.eventDeadline}}" readonly/>
            </div>
</script>
<div id="value"></div>