Как получить динамические идентификаторы в привязке данных foreach для сортируемого аккордеона

Question

Привет, я хочу использовать сортируемый аккордеон ( http://jqueryui.com/accordion/) вместе с knockout-js "data-bind: foreach"-loop.

Для каждого цикла my потребуется уникальный идентификатор, но как мне сгенерировать его для обработки jQuery?

Knockoutcode:

self.Tasks = ko.observableArray(); // has TaskId, Taskname, Description...

HTML-Accordian:

        <div id="accordion" data-bind="foreach: Tasks">
            <div id="THIS HAS TO BE DYNAMICALLY GENERATED???" class="group">
                <h3><b><span data-bind="text: Taskname"></span></b></h3>
                <div>
                    <textarea name="Description" data-bind="value: Description"></textarea>
                </div>
           </div>
        </div>

Javascript это:

$(function() {

    $( "#accordion" )
      .accordion({
          header: "> div > h3"  
      })
      .sortable({
        axis: "y",
        handle: "h3",
        stop: function( event, ui ) {
            var items=[];
            ui.item.siblings().andSelf().each( function(){
                //compare data('index') and the real index
                if($(this).data('index')!=$(this).index()){
                    items.push(this.id);
                }
            });
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children( "h3" ).triggerHandler( "focusout" );
            // Print out the sequence of tasks for further processing
            if(items.length) $("#sequence").text(items.join(',')); 
            ui.item.parent().trigger('stop');
        } 
    })
    .on('stop',function(){
          $(this).siblings().andSelf().each(function(i){
              $(this).data('index',i);
          });
      })
      .trigger('stop');
  });

Часть меня говорит мне, что это должно быть легко, но я явно не в силах понять это. У кого-нибудь есть хорошая идея?

Answer 1

Вы можете использовать ключевое слово $index().

Хотя я не уверен в синтаксисе, что-то вроде приведенного ниже кода может поставить вас на правильный путь

<div id="accordion" data-bind="foreach: Tasks">
        <div data-bind="attr : {'id': $index()}" class="group">
            <h3><b><span data-bind="text: Taskname"></span></b></h3>
            <div>
                <textarea name="Description" data-bind="value: Description"></textarea>
            </div>
       </div>
    </div>

Как указано ниже с помощью TaskId

<div id="accordion" data-bind="foreach: Tasks">
        <div data-bind="attr : {'id': TaskId}" class="group">
            <h3><b><span data-bind="text: Taskname"></span></b></h3>
            <div>
                <textarea name="Description" data-bind="value: Description"></textarea>
            </div>
       </div>
    </div>