Jaki jest właściwy sposób ładowania nowej zawartości do okna kendo?

Question

Mam okno kendo, które ma formę wewnątrz niego. Formularz zawiera elementy wejściowe z danymi rekordu w nim zawartymi. Użytkownik może zamknąć okno i wybrać inny rekord do wyświetlenia. Kiedy użytkownik to robi, muszę ponownie pokazać okno kendo w tym samym formularzu, ale z innymi danymi rekordów. Oto co mam aktualnie robi

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

Formularz jest zawarty w record.jsp, i wypełnić go z danymi JSON że uprzednio otrzymanej z serwera (za pośrednictwem JavaScript odwołuje się record.jsp). Muszę się upewnić, że okno nie pojawi się, dopóki nowe dane rekordów nie zostaną wypełnione w formularzu. Czy to jest właściwy sposób, aby to zrobić, czy jest jakiś lepszy sposób?

Answer 1

Zamiast tworzyć nowe okno za każdym razem, czy odświeżenie jego treść, ja polecam:

1. Tworzenie okna,
2. Każdy użytkownik wybierze nowy rekord, powiązanie nowych danych do okna i następnie otwórz.

W ten sposób wystarczy załadować stronę tylko raz.

Możesz również rozważyć zdefiniowanie strony record.jsp jako szablonu Kendo na oryginalnej stronie.

Przykład:

Biorąc pod uwagę następujące wybierane przez użytkownika rekordy:

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" } 
]; 

oraz formularz zdefiniowane jako szablon z następującym 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> 

Nasz JavaScript byłoby coś podobne:

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

dane wiążą się z okna i otwarcie go:

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

I wreszcie wywołanie funkcji z danymi.

openForm(data[0]); 

Można zobaczyć go w ruchu na tej JSFiddle

UWAGA: Jeśli nadal wolą używać strony zewnętrznej, wystarczy zmienić template: $("#record-jsp").html() przez: url: "record.jsp"