Lightswitch HTML 사용자 정의 컨트롤이 한 번만 표시됩니다.

Question

chartj를 사용하여 차트를 렌더링하는 하나의 사용자 정의 컨트롤이있는 LS 프로젝트를 작성했습니다. 처음 페이지를로드 할 때마다 괜찮습니다.하지만 다른 페이지로 이동 한 다음 다시 돌아 오면 사용자 정의 컨트롤이 더 이상 렌더링되지 않습니다. 코드는 호출되지만 아무것도 표시되지 않습니다. 나는 그것을보고 싶을 때마다 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(); 
}; 

Answer 1

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

을};

Answer 2

다른 페이지로 이동하면 Lightswitch이 (가 숨 깁니다) 페이지에서 HTML 요소를 제거하지 않습니다

. -> 이것이 바로 "뒤로 버튼"이 작동하는 방식이며, "이전 페이지"를 보여 주거나 설정합니다.

페이지 소스에서 페이지로 다시 이동하면 둘 이상의 "chartClienti"요소를 찾을 수 있습니다.

하나 개의 가능한 솔루션은 이미 있으면 요소를 제거하는 것이다

myapp.Home.GraficoClienti_render = 기능 (요소의 ContentItem) {// 를 지난번 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)