handlebars not receiving object

Question

Handlebars is refusing to cooperate. I have this template

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

And I try to populate it with some values like this

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

But the inputs don't get populated with the values. What's wrong here?

Answer 1

Your template is looking for 3 properties: {name:'',email:'',phone:''}

But the object you are passing has only the single options property. So it cannot find these values and leaves them blank.

You can:

• Adjust the template to use the 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>

• Adjust the template to use the correct path

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

• Leave the template alone and adjust the javascript to not wrap these values in an options field:

  edit_contact_html = template(current_data);