Question

最近我遇到了Kendo模板的奇怪行为。如果模板中有输入，模板将仅记住第一个输入的值。因此，您输入的值以后无法覆盖。

我有以下模板

    <script id="add-new-gruppe" type="text/x-kendo-template">
        <div class="row-fluid">
            <div class="span12">
                <label>Name:</label>
                <input type="text" class="span12" id="groupName" name="newGroupName" /><br />
            </div>
        </div>
        <br />
        <div class="pull-right">
            <button class="add-new-gruppe btn btn-primary">OK</button>
            <button class="add-new-gruppe-cancel btn">Cancel</button>
        </div>
    </script>

问题是，如果用户尝试添加多个组 - 他将永远不会设法这样做，因为只会考虑首次输入的名称。

您可以在这里重现该问题（我基于删除确认示例）：

http://jsfiddle.net/x79yp/2/

点击“删除记录”
输入123
点击是
您会看到刚刚输入的值的提醒。
点击“删除记录”
输入345
点击是
您会看到一个警告“123”而不是输入的值“345”

这是一个非常有趣的错误，或某些特定的行为。

为什么会发生这种情况以及如何解决这个问题？

Answer 1

问题是您多次创建窗口而不是删除它。当您下次请求input元素时，您将获得第一个元素的值（而不是刚创建的最后一个元素）。

相反，请考虑其他代码：

HTML

<button class="delete-button k-button">Delete record</button>
<script id="delete-confirmation" type="text/x-kendo-template">
    <p class="delete-message"> Enter anything </p>
    <input class="span12" id='enteredText'/><br/>
    <button class="delete-confirm k-button"> Yes</button>
    <a href="#" class="delete-cancel k-button">No</a>
</script>

JavaScript的：

$(document).ready(function () {
    var template = $("#delete-confirmation").html();
    // Create window once
    var kendoWindow = $("<div />").kendoWindow({
        title    : "Confirm",
        resizable: false,
        modal    : true,
        visable  : false
    }).html(template).data("kendoWindow");

    $(".delete-confirm", kendoWindow.element).click(function (e) {
        alert($('#enteredText').val());
        kendoWindow.close();
    });

    $(".delete-button").click(function (e) {
        $('#enteredText').val("");  // Clean previous value
        kendoWindow.open();
    });

    $(".delete-cancel").click(function () {
        kendoWindow.close();  // Cancel without showing
    });
});

看到它正在运行here

Kendo模板记住第一个输入的值

1 个答案: