LiveQuery Graph plotting: Data does not pass through from View to ViewModel

Question

I'm a newbie in the world of javascript and c# so please forgive the weakness of some of the logic.

I'm trying to get binded data to move from the view (report.regional.html, using the link 'View country report') to the viewmodel (report.regional.js, function 'CountryRep') and then plot a graph using this data on the viewmodel then return it to the view to the div 'CountryRepMod'.

The first part of the HTML:

<div class="well">
        <table class="table table-striped  table-hover table-condensed" style="padding-bottom: 0px;margin-bottom: 0px;">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Total Deals</th>
                    <th>Total Open deals</th>
                    <th>Total Open Yellow deals</th>
                    <th>Total open red deals</th>
                    <th>Total closed/terminated</th>
                    <th>Days elapsed pre CC to PS Open deals</th>
                    <th>Business to instruct legal (Average)</th>
                    <th>Lawyer TAT to draft (Average)</th>
                    <th>Action</th>
                </tr>
            </thead>
            <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="javascript:void(0)" data-bind='click: $parent.CountryRep'>View Country Report</a>
</td>

                </tr>
            </tbody>
        </table>
    </div> 

Clicking "View Country Rep" should send all the binded data to this method in the js file:

self.CountryRep = function (obj) {


        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);



        }

Then PlotCountry should plot the graph, like so:

function PlotCountry (data){


    $("#CountryRepMod").livequery(function () {

                title('Country report for ' + data[0].Name);

                $.jqplot.config.enablePlugins = true;
                var s1 = [data[0].TotalDeals, data[0].TotalOpenDeals, data[0].TotalYellowDeals, data[0].TotalRedDeals, data[0].TotalClosedTermDeals, data[0].LawyerTAT];
                var ticks = ['Total deals', 'Total open deals', 'Open with expired credit sanctions', 'Open deals within 30 days of expiry of credit sanction', 'Total closed/Terminated deals', 'Total TAT to draft (average)'];

                var plot1 = $.jqplot('CountryRepMod', [s1], {
                    // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
                    animate: !$.jqplot.use_excanvas,
                    seriesDefaults: {
                        renderer: $.jqplot.BarRenderer,
                        rendererOptions: {
                            fillToZero: true,
                            varyBarColor: true,
                            barWidth: 10
                        },

                        pointLabels: { show: true },
                        highlightMouseDown: true
                    },

                    axesDefaults: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                            angle: -30
                        }
                    },

                    axes: {
                        seriesDefaults: {
                            renderer: $.jqplot.BarRenderer,
                            rendererOptions: {fillToZero: true},
                            highlightMouseDown: true
                        },
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks
                        },
                    }

                });

                $('#CountryRepMod').bind('jqplotDataClick',
                    function (ev, seriesIndex, pointIndex, data) {
                        $('#info1').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
                    }
                );
            });


    $('#CountryRepMod').modal('show');
    }

Which then takes the data to the div:

<div class="modal hide fade" id="CountryRepMod" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Country Report</h3>
                </div>
                <div class="modal-body">

                    <hr />
                    <table class="table table-striped  table-hover" style="padding-bottom: 0px;margin-bottom: 0px;">
                        <thead>
                            <tr>
                                <th>Country</th>
                                <th>Total Deals</th>
                                <th>Total Open deals</th>
                                <th>Total Open Yellow deals</th>
                                <th>Total open red deals</th>
                                <th>Total closed/terminated</th>
                                <th>Days elapsed pre CC to PS Open deals</th>
                                <th>Business to instruct legal (Average)</th>
                                <th>Lawyer TAT to draft (Average)</th>

                            </tr>
                        </thead>

                        <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>

                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>

However when I click View country report, it does not load the page, it just goes to the home page. In fact, it doesn't seem to be going to CountryRep because I put a breakpoint there and it never enters.

Any thoughts?

Answer 1

Actually this does not work as you are trying. You need to remember some key points while using knockoutjs

1. knockout uses view(html file) and a viemodel(javascript function or object)
2. viewmodel code can be written in same html file in script tags or in a separate .js to be included by script tag.
3. ko.applyBindings activates knockout. Means maps viewmodel to view (still being on the same file)

What you are doing wrong?

You are trying to pass binded data from a page to another page
Then you need that data to plot graph

Note : when you click on the anchor link you loos all binded data

What you need to do?

There are some ways to get your task done.

1. Use Single page application so that you dont loose any data. Anchor will only lead us to another part of the same page where all data will be available. See this for SPA. You can avoid using jquery mobile.

2. Use a hidden form where you will save binded data and then submit that form. On the next page get data from post/get and pass it to the viewmodel binded to the second page.

3. Instead save the data you need on the next page in localStorage or sessionStorage and read it from localStorage or sessionStorage on the next page and pass it to the viewmodel binded to the second page.

Hope this helps