Knockout.js - xxxx is not a function

Question

I am trying to incorporate Knockout.js into a WebApplication.

The tutorial I am basing much of my code on is here.

Basically - I have a list of items - I want to be able to click an item and have the corresponding data appear in a div at the bottom of the page. Eventually I'll use jquery.UI Dialog plugin to turn this div into a popup, but for now, I'm just trying to get the selectedItem to work.

My (simplified) code is here: http://jsfiddle.net/fZXAX/1/

I just get the error: actionListViewModel.selectedActionId is not a function.

I don't see the difference between this and the tutorial which uses selectedMailId in an identical way. The only difference between my code and the example is that I am not using literal notation.

Can anyone see where I am going wrong? Thanks in advance.

Answer 1

Your error is here:

click: function() {actionListViewModel.selectedActionId(id)}

actionListViewModel is a constructor function, but you're acting as if it's an object.

See this forked jsFiddle. This line, which defines a constructor function

function actionListViewModel () {

was changed to be an instance of a new object, created by calling an anonymous constructor function.

var actionListViewModel = new function () {

and this line, where you were creating an instance of your previously defined function

ko.applyBindings(new actionListViewModel());

was changed to just pass in the instance that we setup earlier

ko.applyBindings(actionListViewModel);

Alternatively you could simply define a variable viewModel and set it = new actionListViewModel(); and then update your click literal to point to viewModel instead of actionListViewModel. You can see that approach here