克隆包含剑道输入的 div答案

【问题标题】：Cloning div containing kendo inputs克隆包含剑道输入的 div
【发布时间】：2016-10-24 20:48:04
【问题描述】：

我有一个应用程序，它允许用户动态创建包含剑道输入的 div。为此，我有一个 div，其中包含多个剑道输入，我将其用作一种模板。当用户决定向页面添加一个部分时，我使用 jquery.clone() 克隆我的 div。 UI 中的一切看起来都很好，但是由于 kendo 输入仅在 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，然后重建它？

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

【问题讨论】：

标签： javascript jquery html kendo-ui clone

【解决方案1】：

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

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

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

【讨论】：