將新內容加載到kendo窗口的正確方法是什麼？

Question

我有一個kendo窗口，裏面有一個窗體。該表單具有填充其中的記錄數據的輸入元素。用戶可以關閉窗口並選擇一個不同的記錄進行查看。當用戶這樣做時，我需要再次以相同的形式顯示kendo窗口，但是具有不同的記錄數據。這就是我目前做

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

的形式被包含record.jsp內，和我一起，我以前從服務器接收（通過JavaScript在record.jsp引用）JSON數據填充它。我需要確保窗口不顯示，直到新的記錄數據填充到表單中。這是做這件事的正確方法還是有更好的方法？

Answer 1

不是每次都創建一個新的窗口或刷新它的內容，我建議：

1. 創建一個窗口，
2. 每一個用戶選擇了一個新的記錄，新的數據綁定到窗口然後打開它。

這樣你只需要加載一次頁面。

您可能還會考慮將頁面record.jsp定義爲原始頁面中的Kendo UI模板。

例子：

考慮以下用戶可選擇的記錄：

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

並將其定義爲下面的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> 

我們的JavaScript將是什麼如：

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

個

數據綁定到窗口打開它：

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

最後調用與數據的功能。

openForm(data[0]); 

你可以看到它運行在這個JSFiddle

注：如果你還是喜歡使用外部的頁面，只需要通過改變template: $("#record-jsp").html()：url: "record.jsp"