web-dev-qa-db-ja.com

新しいコンテンツを剣道ウィンドウにロードする適切な方法は何ですか？

中に形のある剣道窓があります。フォームには、レコードのデータが入力された入力要素があります。ユーザーはウィンドウを閉じて、表示する別のレコードを選択できます。ユーザーがこれを行うとき、同じフォームで異なるレコードデータを使用して剣道ウィンドウを再度表示する必要があります。これが私が現在していることです

    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内に含まれており、以前にサーバーから（record.jspで参照されているJavaScriptを介して）受信したJSONデータをフォームに入力します。新しいレコードデータがフォームに入力されるまで、ウィンドウが表示されないようにする必要があります。これはこれを行う正しい方法ですか、それとももっと良い方法がありますか？

windowsmodal-dialogkendo-ui
12
James

毎回新しいウィンドウを作成したり、コンテンツを更新したりする代わりに、次のことをお勧めします。

  1. ウィンドウを作成し、
  2. 各ユーザーは新しいレコードを選択し、新しいデータをウィンドウにバインドしてから開きます。

この方法では、ページを1回だけロードする必要があります。

また、元のページでページ_record.jsp_をKendoUIテンプレートとして定義することを検討することもできます。

例：

次のユーザーが選択可能なレコードがあるとします。

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

22
OnaBai