LiveQuery Graph绘图:数据不会从View传递到ViewModel

时间:2014-08-13 06:52:08

标签: c# javascript mvvm knockout.js livequery

我是javascript和c#世界的新手,所以请原谅一些逻辑的弱点。

我尝试将绑定数据从视图中移出(report.regional.html,使用链接'查看国家/地区报告')到viewmodel(report.regional.js,function ' CountryRep')然后在viewmodel上使用此数据绘制图表,然后将其返回到div' CountryRepMod'的视图。

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> 

点击&#34;查看国家代表&#34;应该将所有绑定数据发送到js文件中的此方法:

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



        }

然后PlotCountry应该绘制图形,如下:

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

然后将数据传递给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>

但是,当我点击查看国家/地区报告时,它不会加载页面,只会转到主页。事实上,它似乎没有进入CountryRep,因为我在那里放了一个断点,它永远不会进入。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

实际上这并不像你想的那样有用。使用knockoutjs时需要记住一些关键点

  1. knockout使用view(html文件)和viemodel(javascript函数或对象)
  2. viewmodel代码可以在脚本标记中的相同html文件中编写,也可以在单独的.js中编写,以包含在脚本标记中。
  3. ko.applyBindings激活淘汰赛。意味着将视图模型映射到视图(仍在同一文件中)
  4. 你做错了什么?

    您正尝试将绑定数据从页面传递到另一页面 然后你需要这些数据来绘制图形

    注意:当您点击锚点链接时,您将隐藏所有绑定数据

    您需要做什么?

    有一些方法可以完成任务。

    1. 使用单页应用程序,这样就不会丢失任何数据。 Anchor只会将我们带到同一页面的另一部分,其中所有数据都可用。见this 用于SPA。您可以避免使用jquery mobile。

    2. 使用隐藏的表单保存绑定数据,然后提交该表单。在下一页上从post / get获取数据并将其传递给绑定到第二页的viewmodel。

    3. 而是在localStorage或sessionStorage的下一页上保存您需要的数据,并在下一页上从localStorage或sessionStorage读取它,并将其传递给绑定到第二页的viewmodel。

    4. 希望这有帮助