Question

I have this basic knockout script set up (still learning)

$.getJSON(clientUrl + "/list/" + 1, function (data) {

var viewModel = {
    clients: ko.observableArray(data)
};

ko.applyBindings(viewModel);
});

The first argument ‘lucidServer.getClients(1)’ makes a call to this ajax request:

var getClients = function (id) {
    return $.ajax(clientUrl + "/list/" + id)
};

Now I am getting the json back, but it does not seem to be binding correctly the the template. Here is the json:

0: {iD:1, userId:1, name:CompanySoft, LLC.,…}
1: {iD:2, userId:1, name:Widget Factory,…}
2: {iD:3, userId:1, name:Jim's Consulting,…}

ANd the template is here:

<div id="clientListOutput">
            <ul "template: { foreach: clients }">
                <li><span data-bind"text: name"></span></li>
            </ul>
        </div>

Answer 1

You have a lot of typos in your markup.

The HTML should look like:

  <div id="clientListOutput">
            <ul data-bind="foreach: clients">
                <li><span data-bind="text: name"></span></li>
            </ul>
  </div>

As you have markup inside your ul tags you don’t need to use the template binding. Just use a foreach and Knockout will do the work to iterate over each client and render the li for each one.

Here is a working fiddle: http://jsfiddle.net/jearles/6XhM4/