График LiveQuery Graph: данные не передаются из View в ViewModel
Я новичок в мире JavaScript и C#, поэтому, пожалуйста, прости слабость некоторых из логики.
Я пытаюсь получить связанные данные, чтобы перейти от представления (report.regional.html, используя ссылку "Просмотр отчета по стране") к viewmodel (report.regional.js, функция "CountryRep"), а затем построить график, используя эти данные в модели представления затем возвращают их в представление 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>
Нажмите "View Country Rep", чтобы отправить все связанные данные этому методу в файл 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 ответ
На самом деле это не работает, как вы пытаетесь. Вы должны помнить некоторые ключевые моменты при использовании knockoutjs
- нокаут использует представление (html файл) и viemodel(функция или объект javascript)
- код viewmodel может быть записан в том же html-файле в тегах скрипта или в отдельном
.jsбыть включенным тегом скрипта. ko.applyBindingsактивирует нокаут. Означает карты viewmodel для просмотра (все еще находится в том же файле)
Что ты делаешь не так?
Вы пытаетесь передать связанные данные со страницы на другую страницу
Затем вам нужны эти данные для построения графика
Примечание: при нажатии на ссылку привязки вы теряете все связанные данные
Что тебе необходимо сделать?
Есть несколько способов выполнить вашу задачу.
Используйте одностраничное приложение, чтобы не потерять данные. Якорь приведет нас только к другой части той же страницы, где будут доступны все данные. Смотрите это для SPA. Вы можете избежать использования jquery mobile.
Используйте скрытую форму, где вы сохраните данные в привязке, а затем отправите эту форму. На следующей странице получите данные из post/get и передайте их в view-модель, привязанную ко второй странице.
Вместо этого сохраните необходимые данные на следующей странице в localStorage или sessionStorage, прочитайте их из localStorage или sessionStorage на следующей странице и передайте их в модуль представления, связанный со второй страницей.
Надеюсь это поможет