Как правильно загружать новый контент в окно 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();

форма содержится в записи.jsp, и я заполняю его данными JSON, которые я ранее получил от сервера (через JavaScript упоминается в записи.JSP-страница.) Мне нужно убедиться, что окно не отображается, пока новые данные записи не будут заполнены в форме. Это правильный способ сделать это или есть способ лучше?

11
kendo-ui modal-dialog windows

1 ответов

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

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

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

вы также можете рассмотреть вопрос о наличии страницы record.jsp определено в качестве шаблона кендо 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() by:url: "record.jsp"

22