Cách thích hợp để tải nội dung mới vào cửa sổ kendo là gì?

Question

Tôi có cửa sổ kendo có biểu mẫu bên trong. Biểu mẫu có các yếu tố đầu vào với dữ liệu của bản ghi được điền trong đó. Người dùng có thể đóng cửa sổ và chọn một bản ghi khác để xem. Khi người dùng thực hiện điều này, tôi cần hiển thị lại cửa sổ kendo với cùng một biểu mẫu nhưng với dữ liệu bản ghi khác nhau. Đây là những gì tôi đang làm

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

Các mẫu được chứa trong record.jsp, và tôi cư nó với dữ liệu JSON mà tôi trước đây đã nhận từ máy chủ (thông qua JavaScript được tham chiếu trong record.jsp). Tôi cần đảm bảo rằng cửa sổ không hiển thị cho đến khi dữ liệu bản ghi mới được điền vào biểu mẫu. Đây có phải là cách chính xác để làm điều này hoặc là có một số cách tốt hơn?

Answer 1

Thay vì tạo ra một cửa sổ mới mỗi lần hoặc làm mới nội dung của nó, tôi khuyên bạn nên:

1. Tạo một cửa sổ,
2. Mỗi người sử dụng chọn một kỷ lục mới, ràng buộc dữ liệu mới vào cửa sổ và sau đó mở nó ra.

Bằng cách này, bạn chỉ cần tải trang một lần.

Bạn cũng có thể xem xét việc có trang record.jsp được định nghĩa là mẫu giao diện người dùng Kendo trong trang gốc của bạn.

Ví dụ:

Với người sử dụng có thể lựa chọn hồ sơ sau đây:

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

Và một hình thức định nghĩa là một mẫu bằng đoạn HTML sau:

<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> 

chúng tôi JavaScript sẽ là một cái gì đó như:

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

dữ liệu Ràng buộc vào cửa sổ và mở nó:

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

Và cuối cùng cách gọi hàm với dữ liệu.

openForm(data[0]); 

Bạn có thể nhìn thấy nó chạy trên này JSFiddle

LƯU Ý: Nếu bạn vẫn thích sử dụng các trang bên ngoài, chỉ cần thay đổi template: $("#record-jsp").html() bởi: url: "record.jsp"