Question

我正在使用看起来像这样的把手在输入中设置默认值。

        <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”，仅添加空白之前的第一个单词。如何解决这个问题？

下面的演示：

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>

WhiteSpace问题，当使用带有<input />标签的车把时

1 个答案: