Qual è il modo corretto di caricare nuovi contenuti in una finestra di kendo?

Question

Ho una finestra di kendo che ha una forma al suo interno. Il modulo contiene elementi di input con i dati di un record popolati al suo interno. L'utente può chiudere la finestra e selezionare un altro record da visualizzare. Quando l'utente fa questo, ho bisogno di mostrare nuovamente la finestra di kendo con lo stesso modulo ma con dati di record diversi. Qui è quello che sto facendo attualmente

if (!$("#winContainer").data("kendoWindow")) { 
     $("#winContainer").kendoWindow({ 
      modal: true, 
      width: "969px", 
      height: "646px", 
      title: "View Record", 
      content: "record.jsp" 
     }); 
    } else { 
     $("#winContainer").data("kendoWindow").refresh({url: 'record.jsp'}); 
    } 

    $("#winContainer").data("kendoWindow").center().open(); 

La forma è contenuto all'interno record.jsp, e mi popolarlo con i dati JSON che ho ricevuto in precedenza dal server (tramite JavaScript riferimento in record.jsp). Devo assicurarmi che la finestra non venga visualizzata fino a quando i nuovi dati del record non vengono compilati nel modulo. È questo il modo corretto per farlo o c'è un modo migliore?

Answer 1

Invece di creare una nuova finestra ogni volta o aggiornare il suo contenuto, mi raccomando:

1. Creare una finestra,
2. Ogni l'utente seleziona un nuovo record, si legano i nuovi dati alla finestra e quindi aprilo.

In questo modo è sufficiente caricare la pagina una sola volta.

Si potrebbe anche considerare la pagina record.jsp definita come modello di interfaccia utente Kendo nella pagina originale.

Esempio:

Dati i seguenti utenti record selezionabili:

var data = [ 
    { text1: "text1.1", text2: "text1.2" }, 
    { text1: "text2.1", text2: "text2.2" }, 
    { text1: "text3.1", text2: "text3.2" }, 
    { text1: "text4.1", text2: "text4.2" } 
]; 

e di una forma definita come un modello con il seguente codice HTML:

<script id="record-jsp" type="text/x-kendo-template"> 
    <div> 
     <p>This is your form with some sample data</p> 
     <label>text1: <input type="text" data-bind="value: text1"></label> 
     <label>text2: <input type="text" data-bind="value: text2"></label> 
    </div> 
</script> 

Il nostro sarebbe JavaScript qualcosa Mi piace:

// Window initialization 
var kendoWindow = $("<div id='window'/>").kendoWindow({ 
    title : "Record", 
    resizable: false, 
    modal : true, 
    viewable : false, 
    content : { 
     template: $("#record-jsp").html() 
    } 
}).data("kendoWindow"); 

dati legarsi alla finestra e aprendola:

function openForm(record) { 
    kendo.bind(kendoWindow.element, record); 
    kendoWindow.open().center(); 
} 

E infine invocando la funzione con i dati.

openForm(data[0]); 

si può vedere in esecuzione su questo JSFiddle

NOTA: Se si continua a preferire usare la pagina esterna, solo bisogno di cambiare template: $("#record-jsp").html() da: url: "record.jsp"