How to populate bootstrap typeahead in Handlebars?

Question

How to populate bootstrap typeahead in Handlebars?

I need to populate a typeahead field from the Twitter Bootstrap in a Handlebars template (environment: Node.js and Meteor).

Here is the template bit:

<input type="text" data-provide="typeahead" data-source={{{names}}}>

Here is the Javascript bit:

Template.myTemplate.names = function () {
    var temp = MyCollection.find({}).map(function (x) { return x.name; });
    var ret = "[\"" + temp.join("\", \"") + "\"]";
    return ret;
};

The problem is that the Javascript that is generated is not correct, e.g.,

<input type="text" data-provide="typeahead" data-source="["John", " "Albert"]>

and does not work. I think I am over-engineering this and there must be a better way to generate/render the Handlebars template...

node.js
twitter-bootstrap
meteor
handlebars.js

Answer 1

I stumbled upon this while trying to answer a similar question myself.

The double quotes are required because it expects JSON.

Instead of the ret string formatting, I used JSON.stringify like this in your example:

var ret = JSON.stringify(temp);