knockout и JQuery UI drag and drop конструктор форм

Question

Я хочу реализовать построитель форм, используя knockout и JQuery UI.

Я нашел сортируемый плагин Knockout плюс еще немного материала и реализовал фреймворк для конструктора форм.

По сути, у меня есть наблюдаемый массив, который содержит все мои доступные типы полей с их свойствами, а другой - элементы управления, которые были добавлены в форму. Я добавил привязку, которая добавит мне поле, просто щелкнув по нему, чтобы сохранить быстрых пользователей от перетаскивания. Также событие щелчка на добавленных полях, которое должно перейти к деталям поля (теперь отображается только предупреждение).

Я хочу назначить идентификатор для каждого элемента формы, который добавляется в форму. Если в форму добавляется другой элемент, он должен иметь увеличенный идентификатор, а если элементы в форме переставляются, идентификаторы элементов также должны быть изменены.

Мой вопрос заключается в том, где и как я должен выполнить это присвоение идентификатора, а затем переназначение, чтобы каждый раз, когда новое поле добавлялось или перемещалось вокруг идентификаторов элемента формы, было в последовательном порядке.

Я предполагаю, что мог бы назначить идентификатор для каждого отброшенного элемента в обработчике привязки, но как я могу управлять им впоследствии?:

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

Это также означало бы, что я должен изменить плагин Knockout Sortable, которого я стараюсь избегать.

Код находится в этой скрипке: http://jsfiddle.net/razvangl/z52G7/

Answer 1

Если я правильно понимаю, вы могли бы использовать $index наблюдаемый, который доступен при связывании в foreach,

Итак, вы бы связали что-то вроде:

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

При перетаскивании полей идентификатор будет обновляться в зависимости от его положения в массиве observableArray.

Я обновил вашу скрипку (и обновил версию KO), чтобы показать значение в td: http://jsfiddle.net/rniemeyer/56PLd/