我有一个带有一个自定义控件的 LS 项目,我在其中使用 chartjs 渲染图表。第一次加载页面时一切正常,但是如果我移动到另一个页面然后返回,则自定义控件不再呈现(调用代码但没有任何内容)。每次我想看它时,我都必须按 F5!
我该如何解决这个问题?
更新:我注意到,如果我设置了一个全局变量,当我回到屏幕时,该变量不会重新初始化。另一个包含jquery周日历的页面也有同样的问题。当我离开屏幕并稍后返回时,我加载了"屏幕"的另一个实例或只获取旧实例,所有内容都已加载?
这里的代码
/// <reference path="~/GeneratedArtifacts/viewModel.js" />
function updateGraphs(chart, query, inizio, fine) {
var last = 0;
for (var i = inizio; i <= fine; i.addDays(1)) {
query(i).execute().then(function (res) {
try {
if (chart.datasets[0].points.length > 25)
chart.removeData();
var date = new Date(inizio.valueOf()).addDays(last++);
var str = format_2digit(date.getDate()) + "/" + format_2digit(date.getMonth() + 1) + "/" + date.getFullYear();
chart.addData([res.results.length], last % 5 == 0 ? str : "");
}
catch (e) { alert(e); }
});
}
}
myapp.Home.created = function (screen) {
var now = new Date();
var month = now.getMonth();
var year = now.getFullYear();
screen.GraficoInizio = new Date(year, month, 1);
screen.GraficoFine = new Date(year, month + 1, 0);
};
myapp.Home.GraficoFine_postRender = function (element, contentItem) {
contentItem.dataBind("screen.GraficoInizio", function (value) {
var month = contentItem.screen.GraficoInizio.getMonth();
var year = contentItem.screen.GraficoInizio.getFullYear();
contentItem.value = new Date(year, month + 1, 0);
});
};
myapp.Home.GraficoClienti_render = function (element, contentItem) {
// creo il grafico
$(element).append("<canvas id='chartClienti' width='500px' height='300px' />");
var ctx = $('#chartClienti').get(0).getContext("2d");
var chart = new Chart(ctx);
var data = {
labels: [],
datasets: [
{
label: [],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
chart = chart.Line(data, { animationSteps: 15 });
contentItem.dataBind("screen.GraficoInizio", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi,contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
contentItem.dataBind("screen.GraficoFine", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi, contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
};
myapp.Home.StampaQRCode_execute = function (screen) {
var popup = window.open("../QRCode.aspx");
popup.focus();
};
当您导航到另一个页面时,Lightswitch 不会从页面中删除(隐藏)html 元素。 -> 这就是"后退按钮"的工作方式,它显示/设置可见的"旧页面"。
当您导航回页面源代码中的页面时,您将能够找到多个"chartClienti"元素。
一种可能的解决方案是删除该元素(如果该元素已存在):
我的应用。Home.GraficoClienti_render = 函数 (元素, 内容项) { Creo il grafico
var existedChart = $('#chartClienti');
//element exists if it's length is more than 0
if (existedChart.length > 0) {
existedChart.remove();
}
$(element).append("<canvas id='chartClienti' width='500px' height='300px' />");
var ctx = $('#chartClienti').get(0).getContext("2d");
var chart = new Chart(ctx);
var data = {
labels: [],
datasets: [
{
label: [],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
chart = chart.Line(data, { animationSteps: 15 });
contentItem.dataBind("screen.GraficoInizio", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi,contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
contentItem.dataBind("screen.GraficoFine", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi, contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
};
更好的解决方案如下:A) 获取具有该 id 的所有元素并更新最新版本。B) 每次呈现控件时都给出唯一的 id(自动递增 1:chartClienti0、chartClienti1、...chartClientiN)
var globalVariableForchartClienti;
myapp.Home.GraficoClienti_render = function (element, contentItem) {
// creo il grafico
var chartClientiElementId = 'chartClienti_' + Math.floor((Math.random() * 999999) + 1);
$(element).append("<canvas id='" + chartClientiElementId + "' width='500px' height='300px' />");
//You can use "globalVariableForchartClienti" to access custom element in any other function
globalVariableForchartClienti = chartClientiElementId;
var ctx = $('#chartClienti').get(0).getContext("2d");
var chart = new Chart(ctx);
var data = {
labels: [],
datasets: [
{
label: [],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
chart = chart.Line(data, { animationSteps: 15 });
contentItem.dataBind("screen.GraficoInizio", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi,contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
contentItem.dataBind("screen.GraficoFine", function (value) {
updateGraphs(chart, myapp.activeDataWorkspace.ApplicationData.AbbonamentiAttivi, contentItem.screen.GraficoInizio, contentItem.screen.GraficoFine);
});
};