Bind to simple array of strings

Question

If I want to bind a template to a plain old array of strings, what do I put in the ${??} expression?

I hope this snippet isn't too short so as to confuse:

<ul data-bind="template: { name: 'authorTemplate', foreach: authors }">
</ul>

where authors is simply ["a", "b", "c"]

<script type="text/x-jquery-tmpl" id="authorTemplate">
    <li>${what_do_I_put_here???}</li>
</script>

I've tried: val value this and this.toString(). The last two displayed [object Object] so I suspect I'm pretty close there.

score 107 · Accepted Answer · edited Apr 20 '17 at 19:04

107

When using a template: ${$data}

When not using a template: $data

edited Apr 20 '17 at 19:04

answered Aug 30 '11 at 20:19

Adam Rackis

3

An explanation of $data or links to documentation would help would be googlers. – awrigley Aug 31 '11 at 07:22
I can't seem to find that—I got this answer from their google group. Do you by chance have a link? – Adam Rackis Aug 31 '11 at 14:22
Afraid not, but presume it is in the jQuery templates documentation, or else (if it is specific to knockoutjs) in the knockoujs docs. – awrigley Aug 31 '11 at 15:51
5

The `foreach` documentation has a relevant [example](http://knockoutjs.com/documentation/foreach-binding.html) – Gene Golovchinsky Apr 29 '12 at 17:40
15
If not using templates, it would be `
- ...`
– oglester Oct 08 '12 at 14:12
@awrigley http://knockoutjs.com/documentation/click-binding.html `Note 1: Passing a “current item” as a parameter to your handler function` – dark_ruby Feb 18 '13 at 22:34
Knockout binds arrays by calling toString() on each member and then doing .join(", "). – Shital Shah Dec 31 '13 at 02:41

Nenad · Answer 2 · 2013-02-04T20:18:05.040

51

For unnamed array (JSON like: ["value1", "value2"]), it would be:

<ul data-bind="foreach: $root">
 <li data-bind="text: $data"></li>
</ul>

$root keyword does the trick.

edited Feb 04 '13 at 20:18

answered Feb 04 '13 at 20:12

Nenad

Yeah - the above code was for use with jQuery templates. Having ditched that long ago and went with the native knockout templates, this indeed how to do it. – Adam Rackis Feb 04 '13 at 20:29
Actually, `$root` represents the object passed to `ko.applyBindings`. So this would only work if you did something like `ko.applyBindings(["value1", "value2"], document.getElementById("MyValueList"));`. If you're going to be binding anything else on the page, you would be better served having this as a named member on your viewmodel, or you could write the array to the binding like so: `foreach: ["value1", "value2"]`. See http://knockoutjs.com/documentation/binding-context.html for more info. – CptRobby Sep 08 '16 at 13:19

2 Answers2