0

こんにちは、ソート可能なアコーディオン ( http://jqueryui.com/accordion/#sortable ) をノックアウト js の "data-bind: foreach" ループと一緒に使用したいと考えています。

ループごとに一意の「ID」が必要ですが、jQuery が処理するためにそれを生成するにはどうすればよいですか?

ノックアウトコード:

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

HTML アコーディアン:

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

私の一部は、これは簡単なはずだと言っていますが、明らかにそれを理解するには太りすぎです。誰か良い考えがありますか？

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 に答える