淘汰赛和JQuery UI拖放表单构建器

时间:2013-09-18 11:40:54

标签: javascript jquery jquery-ui knockout.js knockout-sortable

我想使用knockout和JQuery UI实现表单构建器。

我找到了Knockout可排序插件以及更多材料,并为表单构建器实现了一个框架。

基本上我有一个可观察的数组,它包含所有可用的字段类型及其属性,另一个包含已添加到表单的控件。我添加了一个绑定,只需单击它就可以为我添加一个字段,这样就可以在拖放时保存快速用户。此外,添加字段上的点击事件将转到字段详细信息(现在仅显示警报)。

我想为添加到表单的每个表单元素分配一个id。如果另一个元素被添加到表单中,它应该具有递增的id,并且如果表单中的元素被重新排列,则元素的id也应该被更改。

我的问题是我应该在何处以及如何执行此ID分配然后重新分配,因此每次添加或移动表单元素的ID时,都会按顺序执行。

我假设我可以为绑定处理程序中的每个被删除元素分配一个id但是如何在之后控制它?:

$(element)[0].id = 'field-nr-' + globalVariable++;

这也意味着我必须更改Knockout Sortable插件,我试图避免这种插件。

代码就在这个小提琴中:http://jsfiddle.net/razvangl/z52G7/

1 个答案:

答案 0 :(得分:1)

如果我理解正确,那么您可以使用$index中绑定时可用的foreach可观察对象。

所以,你会绑定类似的东西:

<table style="width : 100%" data-bind="attr: { id: 'field-nr-' + $index() }" >

当您拖动字段时,id将根据其在observableArray中的位置保持更新。

我更新了您的小提琴(并更新了KO版本)以显示td中的值:http://jsfiddle.net/rniemeyer/56PLd/