Data does not pass from view to viewmodel

Question

I'm new to the world of Knockout and JavaScript so this question might be a bit on the loose side..

I'm having trouble sending my binded data from my view to the controlling JavaScript function. The HTML:

<tbody data-bind="foreach: deals">
    <tr>
        <td><span data-bind="text: Name"></span></td>
        <td><span data-bind="text: TotalDeals"></span></td>
        <td><span data-bind="text: TotalOpenDeals"></span></td>
        <td><span data-bind="text: TotalYellowDeals"></span></td>
        <td><span data-bind="text: TotalRedDeals"></span></td>
        <td><span data-bind="text: TotalClosedTermDeals"></span></td>
        <td> </td>
        <td><span data-bind="text: BusinessToInstLegal"></span></td>
        <td><span data-bind="text: LawyerTAT"></span></td>
        <td> <a href="#" data-bind='click: $parent.CountryRep'>View Country Report</a></td>
    </tr>
</tbody>

Once the data is binded, I want the user to be able to click the "View Country Rep" and the data to be sent to this method in the corresponding js file:

self.CountryRep = function (obj) {
    // Fetching deals data
    //var locate = "/data/getCountryDeals"
    //datacontext.GetJson(locate, obj.Name,

    data[0].Name = obj.Name;
    data[0].TotalDeals = obj.TotalDeals;
    data[0].TotalOpenDeals = obj.TotalOpenDeals;
    data[0].TotalClosedTermDeals = obj.TotalClosedTermDeals;
    data[0].TotalYellowDeals = obj.TotalYellowDeals;
    data[0].TotalRedDeals = obj.TotalRedDeals;
    data[0].BusinessToInstLegal = obj.BusinessToInstLegal;
    data[0].LawyerTAT = obj.LawyerTAT;

    PlotCountry(data);
}

However I am receiving this runtime error: JavaScript runtime error: Object doesn't support property or method 'CountryRep'

I've tried a few different things, like declaring the function without the 'var' and as a normal function, using a different call in the html (<a href="javascript:void(0)" data-bind="click: function(o,e){ $root.CountryRep.call($root, o,e)}">View Country Report</a> ) to no avail.

Any suggestions?

Update: So I've changed the everything as Raheen instructed below and now it does not give the error, however it doesnt seem like its going into countryRep as I've put a breakpoint there and when I click it just loads the home page. Any thoughts on why this is happening? The html is in a file called report.regional.html in the views folder and countryRep is in a js file called report.regional.js in the viewmodels folder.

Try using the Chrome Knockout context debugger here: https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en and use it's inspector tool for your element that you have bound the click event to, so you can see what the `$root` is.. as your error seems to be that your viewmodel that your applying bindings to using ko.applyBindings(..) does not have that `CountryRep` function. Cant see all your code but if the `CountryRep` function is on your view model then all you should need to do is `"click: CountryRep"` — Pricey, Aug 12 '14 at 14:21
You shouldn't need to specify `(obj,e)` when you do the binding in your HTML. You are already binding every deal to a row, so if you have `data-bind='click: $root.CountryRep'`, the CountryRep function will get whatever deal is bound to the row in which you click. You can define that function as `var CountryRep = function (obj)`, where `obj` will be the deal. — hunch_hunch, Aug 12 '14 at 14:22
We'll need a [small](http://sscce.org) repro, or at the very least your "root" view model code. Though without that we can't be sure, it *looks* like you're saving the CountryRep function in the view model's scope, but aren't exporting it. The typical [`var self = this; self.CountryRep = ....` idiom](http://stackoverflow.com/questions/337878/var-self-this) might be what you're after. — Jeroen, Aug 12 '14 at 14:43

Muhammad Raheel · Answer 1 · 2014-08-13T08:53:26.680

You should change your function like this. It is already enough and no need to get separate data

var CountryRep = function (obj) {
    self.PlotCountry(obj);
}

Also where is CountryRep function. I assume it should be $parent.CountryRep as it is in foreach

Call it like this

data-bind='click: $parent.CountryRep'

Edit

Your view model should be something like this

function test(){
    var self = this
    self.deals = ko.observableArray([])

    self.CountryRep = function (obj) {
            self.PlotCountry(obj);
    }
}

EDIT
It is going on home page because you dont have any href attribute set

<a href="countryrep.html" data-bind='click: $parent.CountryRep'>View Country Report</a>

And

self.CountryRep = function (obj) {
    self.PlotCountry(obj);
    return true
}

Thanks Raheen. I've changed it and its no longer giving the error, however after clicking, it just loads the home page. The html is is a file called report.regional.html in the views folder and countryRep is in a js file called report.regional.js in the viewmodels folder. — LeloKunene, Aug 13 '14 at 06:24

Data does not pass from view to viewmodel

1 Answers1