javascript - 克隆包含剑道输入的 div

Question

我有一个应用程序，允许用户动态创建包含剑道输入的 div。为此，我有一个 div，其中包含多个剑道输入，我将其用作模板。当用户决定向页面添加一个部分时，我使用 jquery.clone() 克隆我的 div。 UI 中一切看起来都很好，但由于剑道输入仅在 HTML 中初始化一次，然后被复制，因此输入不会重建，因此初始 ID 不唯一且输入不起作用。

我尝试通过以下方式以编程方式修复此问题

var $kendoInputs = $$(".draggableContainer .k-input");
for (var j = 0; j < $kendoInputs.length; j++) {
    if ($($kendoInputs[j]).attr("id")) {
        var newid = "newid" + j;
        $($kendoInputs[j]).attr("id", newid).attr("name", newid);
    }
}

但是由于输入已经初始化，此时更改 id 是没有用的。有什么方法可以更改剑道输入的 ID 然后重建它吗？

抱歉，文字太长，提前致谢

Answer 1

这几乎就在那里:http://dojo.telerik.com/@Stephen/EWEna

尝试仅克隆 kendo 元素的基本输入(使用新的 id)，而不是克隆 kendo 添加的所有元素。 然后获取原始小部件的类型和选项，并使用原始选项将新元素初始化为原始类型。

var originalElement = $("#" + originalID);
var originalWidgetType = "kendo" + kendo.widgetInstance(originalElement).options.name;
var originalWidget = originalElement.data(originalWidgetType);

element[originalWidgetType](originalWidget.options);

我的 dojo 示例很接近...但由于某种原因，克隆的 DatePickers 太宽...并且我还没有测试所有可能的元素，但我认为它可以用作一个开始。

编辑

我发现这种使用 Kendo MVVM 的技术似乎会更好:http://jsfiddle.net/krustev/U6nSv/

这不是我的解决方案(不知道如何归功于)。

这是我更新为使用该技术的原始示例:http://dojo.telerik.com/@Stephen/aquRE