How to correctly include jQuery with knockout.js in ASP.NET MVC5

Question

I created an MVC project in VisualStudio 2017.

Edit: I updated knockout aand jQuery to newest versions.

I have included my .js file at the bottom and it works fine until I try to use jQuery.

In my .js file:

function job(name) {
    return {
        name: ko.observable(name)
    };
}

var viewModel = {
    jobs: ko.observableArray([new job("johnny"), new job("anderson")]),

    addJob: function () {
        this.jobs.push(new job("Another job"));
    },
}
ko.applyBindings(viewModel);

the markup:

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/knockout-3.4.2.js" type="text/javascript"></script>


<h3>Jobs:</h3>
<ul data-bind="template: {name:'jobsTemplate', foreach:jobs}"></ul>

<script id="jobsTemplate" type="text/html">
    <li>${ $data.name }</li>
</script>

and the page spits out 2 <li> with the text ${ $data.name } meaning to me that jQuery isn't included. I am able to use jQuery in the console.

Thanks for any help!

Answer 1

Knockout templating works through regular knockout data binding.

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

<script id="jobsTemplate" type="text/html">
  <li data-bind="text: name"></li>
</script>