Whitespace in the text for JQuery Templates creates new properties for an element

Question

I'm trying to populate a datalist via Jquery, however, the white space between first and last names causes only the first name to be used and the last name to be inserted as another property.

JQuery:

  function FillNamesDataList(names)
  {
    $("#datalistTemplate").tmpl(names).appendTo("#colleagueNames");
  }

Template:

<script id="datalistTemplate" type="text/x-jquery-tmpl">
<option value=${name}></option>
</script>

If I create an array of strings that are Why This I get the following in my HTML:

How do I fix this?

Answer 1

Try to append your value in double quotes:

<option value="${name}"></option>