0

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

我正在尝试获取绑定数据以从视图(report.regional.html,使用链接“查看国家报告”)移动到视图模型(report.regional.js,函数“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> 

单击“查看国家代表”应将所有绑定数据发送到 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,因为我在那里放了一个断点,它永远不会进入。

有什么想法吗?

4

1 回答 1

0

实际上,这在您尝试时不起作用。使用knockoutjs的时候需要记住一些关键点

  1. 淘汰赛使用视图(html 文件)和 viemodel(javascript 函数或对象)
  2. viewmodel 代码可以写在同一 html 文件中的 script 标签中,也可以单独写在.jsscript 标签中。
  3. ko.applyBindings激活淘汰赛。意味着将视图模型映射到视图(仍然在同一个文件上)

你在做什么错?

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

注意:当您单击锚链接时,您会丢失所有绑定数据

你需要做什么?

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

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

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

  3. 而是将下一页所需的数据保存在 localStorage 或 sessionStorage 中,然后从下一页的 localStorage 或 sessionStorage 中读取它,并将其传递给绑定到第二页的视图模型。

希望这可以帮助

于 2014-08-13T08:46:26.787 回答