Lightswitch HTML 自定义控件只显示一次

Question

我有一个带有一个自定义控件的 LS 项目，我在其中使用 chartjs 呈现图表。我第一次加载页面时一切正常，但如果我移动到另一个页面然后返回自定义控件不再呈现（代码被调用但没有出现）。每次想看都要按F5！

我该如何解决这个问题？

更新：我注意到，如果我设置了一个全局变量，当我回到屏幕时，该变量不会重新初始化。另外，另一个包含 jquery 周日历的页面也有同样的问题。当我离开屏幕然后再回来时，我会加载 "screen" 的另一个实例，或者只获取旧的实例，所有内容都已加载？

这里是代码

/// <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();
};

Answer 1

当您导航到另一个页面时，Lightswitch 不会从页面中删除（它隐藏）html 元素。 -> 这就是 "Back Button" 的工作原理，它 shows/set 可见 "old page"。

当您导航回页面源中的页面时，您将能够找到多个 "chartClienti" 元素。

一个可能的解决方案是删除该元素（如果它已经存在）：

myapp.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（自动递增一个：chartClienti0、chartClienti1、... chartClientiN）

Answer 2

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

};

Lightswitch HTML 自定义控件只显示一次

Lightswitch HTML custom control show only once

javascript

jquery

visual-studio-lightswitch

lightswitch-2013