Question

您好我想使用可排序的手风琴（http://jqueryui.com/accordion/#sortable）与knockout-js一起“data-bind：foreach”-loop。

对于每个循环，我需要一个唯一的“id”，但是如何生成jQuery来处理呢？

Knockoutcode：

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

我的一部分告诉我这应该很容易，但我显然很想弄清楚。有人有个好主意吗？

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>

如何在可分类手风琴的“foreach”数据绑定中获取动态id

1 个答案: