jQuery可排序的更新數據未被序列化

Question

我正在使用jQuery Sortable plugin。

查看關於如何序列化數據的基本示例我有以下代碼。

<div class='span4'> 
     <ol class='serialization vertical'> 
      <li data-id='1' data-name='Item 1' data-status='1'>Item 1 <span class="status">toggle</span></li> 
      <li data-id='2' data-name='Item 2' data-status='1'>Item 2 <span class="status">toggle</span></li> 
      <li data-id='3' data-name='Item 3' data-status='1'>Item 3 <span class="status">toggle</span></li> 
      <li data-id='4' data-name='Item 4' data-status='1'>Item 4 <span class="status">toggle</span></li> 
      <li data-id='5' data-name='Item 5' data-status='1'>Item 5 <span class="status">toggle</span></li> 
      <li data-id='6' data-name='Item 6' data-status='1'>Item 6 <span class="status">toggle</span></li> 
     </ol> 
    </div> 

    var group = $("ol.serialization").sortable({ 
     group: 'serialization', 
     delay: 500, 
     onDrop: function (item, container, _super) { 
     var data = group.sortable("serialize").get(); 
     var jsonString = JSON.stringify(data, null, ' '); 
    console.log(jsonString); 
     $('#serialize_output2').text(jsonString); 
     _super(item, container) 
     } 
    }); 

我想允許用戶切換每個項目的狀態，所以我已經在

jQuery(document).on("click", ".status", function (event) { 
     var status = $(this).closest("li").attr("data-status"); 
     if(status == 1) { 
      $(this).closest("li").attr('data-status','0'); 
     } 
     else { 
      $(this).closest("li").attr('data-status','1'); 
     } 
    }); 

還補充如果我拖放列表項的console.log將返回之前單擊切換正確的狀態（1或0）。

但是，在拖放完成後，如果嘗試單擊以更新狀態，請再次拖放console.log，以返回列表的正確順序，但不是最新的狀態。

我需要在這裏做些什麼來確保序列化的數據反映了丟棄時數據屬性的值？

see this fiddle.

Answer 1

首先，爲什麼不更新 「數據狀態」，具體如下：

1. https://github.com/johnny/jquery-sortable/blob/master/source/js/jquery-sortable.js#L118

   VAR的結果= $ .extend（{} $ parent.data （））

2. https://github.com/jquery/jquery/blob/1.9-stable/src/data.js#L244

   如果（elem.nodeType === 1 & & jQuery._data（ELEM 「parsedAttrs」）！）{

3. https://github.com/jquery/jquery/blob/1.9-stable/src/data.js#L252

   dataAttr（ELEM，名稱，數據[名稱]）;

4. https://github.com/jquery/jquery/blob/1.9-stable/src/data.js#L291

   如果（數據===未定義& & elem.nodeType === 1）{

所以其原因是通過jQuery的緩存的數據。

解決辦法：

var group = $("ol.serialization").sortable({ 
    group: 'serialization', 
    delay: 500, 
    onDrop: function (item, container, _super) { 
     group.children().each(function(){ 
      jQuery._data(this, 'parsedAttrs', false); 
      jQuery.removeData(this); 
     }); 
     var data = group.sortable("serialize").get(); 
     var jsonString = JSON.stringify(data, null, ' '); 
     console.log(jsonString); 
     $('#serialize_output2').text(jsonString); 
     _super(item, container) 
    } 
}) 

這小提琴：http://jsfiddle.net/hb6hU/1/

希望它能幫助。