javascript - Handlebars 未接收物体

Question

Handlebars 拒绝合作。我有这个模板

<script id="edit_client_modal" type="text/x-handlebars-template">

    <fieldset>

        <input type="text" class="" value="{{name}}" />
        <input type="text" class="" value="{{email}}" />
        <input type="text" class="" value="{{phone}}" />                        

    </fieldset>

我尝试用这样的一些值填充它

var tr = $(this).closest("tr");
var current_data = {
        "name": $.trim(tr.find("td.contact_name").text()),
        "email": $.trim(tr.find("td.contact_email").text()),
        "phone": $.trim(tr.find("td.contact_phone").text())
    }


var source = $("#edit_client_modal").html();
var template = Handlebars.compile(source); 
var options = {options: current_data};

edit_contact_html = template(options); 

但是输入不会填充值。这里出了什么问题？

Answer 1

您的模板正在寻找 3 个属性:{name:'',email:'',phone:''}

但是您传递的对象只有一个 options属性(property)。因此它无法找到这些值并将它们留空。

你可以:

• 调整模板以使用 options block :

  <fieldset>
{{#with options}}
<input type="text" class="" value="{{name}}" />
<input type="text" class="" value="{{email}}" />
<input type="text" class="" value="{{phone}}" />
{{/with}}
</fieldset>

• 调整模板以使用正确的路径

  <fieldset>
<input type="text" class="" value="{{options.name}}" />
<input type="text" class="" value="{{options.email}}" />
<input type="text" class="" value="{{options.phone}}" />
</fieldset>

• 保留模板并调整 JavaScript 以不将这些值包装在选项字段中:

  edit_contact_html = template(current_data);