Question

This is a real simple example, I have a basic JavaScript object with an array, I am using knockout mapping to make the array observable etc.

But when I apply my binding I only get undefined.

Any Ideas Why?

HTML

<div data-bind="with: Data">

    <div class="tab-pane active" id="studydirections">
        <div data-bind="template: { name: studydirectionstemplate, foreach: studydirections }">
        </div>
    </div>

</div>

<script id="studydirectionstemplate" type="text/html">
    <div> <span data-bind="text: Name"> </span> </div> 
</script>​

JavaScript

var viewModel = {};

var data = {
    studydirections: [{
        RecId: 299,
        ColtechCode: 75,
        Name: "FARM",
        Description: "FARMING"},
    {
        RecId: 306,
        ColtechCode: 12,
        Name: "BACC",
        Description: "ACCOUNTING"},
    {
        RecId: 334,
        ColtechCode: 11,
        Name: "BMAN",
        Description: "BUSINESS MANAGEMENT"
    }
]};

viewModel.Data = ko.mapping.fromJS(data);

ko.applyBindings(viewModel);​

The result is

undefinedundefinedundefined

Here is a link to a fiddle to illustrate the problem

http://jsfiddle.net/armandvdwalt/3Q267/

Answer 1

Just change, enclose template name in single quote.

<div data-bind="template: { name: 'studydirectionstemplate', foreach: studydirections }">

Check your updated jsFiddle