javascript - jQuery Sortable 更新数据未序列化

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 将返回列表的正确顺序，但不是最新状态。

我需要在这里做什么来确保序列化数据反射(reflect)删除时数据属性的值？

see this fiddle.

Answer 1

首先，为什么“data-status”没有更新，如下:

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

   var result = $.extend({}, $parent.data())
   

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

   if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
   

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

   dataAttr( elem, name, data[ name ] );
   

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

   if ( data === undefined && 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)
     }
 })

这个 fiddle :http://jsfiddle.net/hb6hU/1/