我是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,因为我在那里放了一个断点,它永远不会进入。
有什么想法吗?
答案 0 :(得分:0)
实际上这并不像你想的那样有用。使用knockoutjs时需要记住一些关键点
.js
中编写,以包含在脚本标记中。ko.applyBindings
激活淘汰赛。意味着将视图模型映射到视图(仍在同一文件中)您正尝试将绑定数据从页面传递到另一页面 然后你需要这些数据来绘制图形
注意:当您点击锚点链接时,您将隐藏所有绑定数据
有一些方法可以完成任务。
使用单页应用程序,这样就不会丢失任何数据。 Anchor只会将我们带到同一页面的另一部分,其中所有数据都可用。见this 用于SPA。您可以避免使用jquery mobile。
使用隐藏的表单保存绑定数据,然后提交该表单。在下一页上从post / get获取数据并将其传递给绑定到第二页的viewmodel。
而是在localStorage或sessionStorage的下一页上保存您需要的数据,并在下一页上从localStorage或sessionStorage读取它,并将其传递给绑定到第二页的viewmodel。
希望这有帮助