Pass a function that returns ko.computed

Question

I have two functions generate and test . When the user clicks the generate button, it is called and then calls the test function. I get the following error:

Pass a function that returns ko.computed.

The error in this line in the test function:

 var unmapped = ko.mapping.toJS(this); 

this is my view model with ko.observable properties.

Here are two features. If I move the contents of the test function to generate , everything works fine, but I need the logic to be in two different functions. What can I do?

I am very stuck here. Any help would be greatly appreciated.

 generate = function () { if (!omega.validatableFranchiseGeneration.validate()) { return false; } omega.franchiseInfo.IsForGeneration(true); test(); } var test = function () { getIpsAndPorts(); for (var i = 0; i < omega.franchiseInfo.LanguagesInfoViewModel().length; i++) { if ($.isArray(omega.franchiseInfo.LanguagesInfoViewModel()[i].SubMenuItemsViewModel)) { omega.franchiseInfo.LanguagesInfoViewModel()[i].SubMenuItemsViewModel = omega.franchiseInfo.LanguagesInfoViewModel()[i].SubMenuItemsViewModel[0]; } } var unmapped = ko.mapping.toJS(this); var jsonData = ko.toJSON(unmapped); $.ajax({ url: "/franchise/Save", type: "POST", // data: ko.toJSON({ folderName: FolderName }), data: { franchiseInfoViewModel: jsonData }, //traditional: true, //contentType: "application/json; charset=utf-8", dataType: 'json', success: function (data, textStatus, xhr) { window.location.href = data.redirectToUrl; }, error: function (request, status, error) { jsonValue = jQuery.parseJSON(request.responseText); omega.franchiseInfo.errorMessages([]); for (var i = 0; i < jsonValue.errorMessages.length; i++) { omega.franchiseInfo.errorMessages.push({ errorMessage: ko.observable(jsonValue.errorMessages[i].ErrorMessage) }); } for (var i = 0; i < omega.franchiseInfo.LanguagesInfoViewModel().length; i++) { InitializeViewLanguagesInfo(omega.franchiseInfo.LanguagesInfoViewModel()[i]); } } }); } 

Answer 1

Not seeing all your code, it's hard to understand, but if the code (as it is) works when it is directly included in the generated file, then I bet that this is not what you think test in it. this has a different meaning inside the test function than inside generate .

Launch Chrome or Firebug and set a breakpoint in the line var unmapped = ko.mapping.toJS(this); . Run the program and when the breakpoint goes to the console, look at this . Is this your viewmodel?

If this is what you expect inside generate , you can always call test like this:

 test.apply(this); 

This explicitly sets the this context for the method call.

Another option is to set the self variable inside your ViewModel. This is usually done from above and looks like this: var self = this; . By creating this variable, you can refer to self' inside any functions within the outer "function" scope, and not have to worry about the value of this`, wavering.

-

Here is a simple script to simulate what I think is happening: http://jsfiddle.net/jearles/aLFWe/

Open the Chrome or Firebug console and look at the registered objects. Note that Window was a registered object when I just called updatea() , but there was Object in the original click function and when I called updateb.apply(this) or updatec() (which referenced self ).