克隆包含剑道输入的 div [英] Cloning div containing kendo inputs

问题描述

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

I have an application which allows users to dynamically create divs containing kendo inputs. To do so I have a div which contains multiple kendo inputs which I use as a sort of template. When the user decides to add a section to the page, i clone my div using jquery.clone(). Everything looks fine in the UI, but since the kendo inputs only get initialized one time in HTML and are then copied, the inputs are not rebuilt therefore the initial ID is not unique and the inputs are not functional.

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

I tried to fix this programmatically by doing

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然后重建它吗?

but since the inputs have already been initialized, changing the ids at this point is useless. Is there any way to change the ID of a kendo input and then rebuild it?

抱歉给您写了这么长的一段文字，提前致谢

Sorry for the long block of text and thanks in advance

推荐答案

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

尝试只克隆剑道元素的基本输入(带有新的 id)，而不是剑道添加的所有元素.然后获取原widget的type和options，用原options将新元素初始化为原type.

Try cloning just the base inputs of the kendo elements(with a new id) instead of the all the elements that kendo adds. Then get the type and options of the original widget and initialize the new element as the original type with the original options.

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

element[originalWidgetType](originalWidget.options);

我的道场示例很接近...但由于某种原因，克隆的 DatePickers 太宽了...我还没有对所有可能的元素进行测试，但我认为它可以作为一个开始.

My dojo example is close...but for some reason the cloned DatePickers are too wide...and I haven't tested with all the possible elements but I think it could be used as a start.

编辑

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

I found this technique using Kendo MVVM that seems like it would be better: http://jsfiddle.net/krustev/U6nSv/

这不是我的解决方案(不确定如何归功于).

This is not my solution(not sure how to credit).

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

Here is my original example updated to use that technique: http://dojo.telerik.com/@Stephen/aquRE

这篇关于克隆包含剑道输入的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！