0

Hi I want to use a sortable accordion (http://jqueryui.com/accordion/#sortable ) together with the knockout-js "data-bind: foreach"-loop.

For each loop my will need a unique "id", but how do I generate that for the jQuery to process?

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>

The javascript is: 

$(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');
  });

A part of me tells me this should be easy, but I´m obviously to thick to figure it out. Anybody have a good idea?

4

1 回答 1

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>
于 2013-09-07T18:28:37.190 回答