Каков правильный способ загрузки нового контента в окно кендо?

У меня есть окно кендо, внутри которого есть форма. Форма содержит элементы ввода с данными записи, заполненными внутри нее. Пользователь может закрыть окно и выбрать другую запись для просмотра. Когда пользователь делает это, мне нужно снова показать окно кендо с той же формой, но с разными данными записи. Вот что я сейчас делаю

    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, и я заполняю ее данными JSON, которые я ранее получил с сервера (через JavaScript, на который ссылается в record.jsp). Мне нужно убедиться, что окно не отображается до тех пор, пока новые данные записи не будут заполнены в форме. Это правильный способ сделать это или есть лучший способ?

Ответы

Ответ 1

Вместо того, чтобы создавать новое окно каждый раз или обновлять его содержимое, я рекомендую:

  • Создайте окно,
  • Каждый пользователь выбирает новую запись, привязывает новые данные к окну и открывает его.

Таким образом вам нужно только загрузить страницу один раз.

Вы также можете подумать о том, что страница record.jsp определена как шаблон пользовательского интерфейса Kendo на исходной странице.

Пример:

Учитывая следующие пользовательские записи:

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"