引导Tabs的MixItUp问题

Question

我计划在引导选项卡上使用MixitUp，现在我已经阅读了一些事物，但是它还没有解决这个问题。

https://stackoverflow.com/questions/34959469/mixitup-not-working-with-bootstrap-tab-pane也没有解决这个问题。

我已经能够用最少的代码以代码方式再现这个问题。http://codepen.io/anon/pen/aNWwZL

问题是，当在不同的标签中应用过滤器时，它们就停止工作了。

复制：

1. 在Tab 1中应用过滤器
2. 在Tab 2中应用过滤器
3. 再次尝试在Tab 1中应用过滤器。

在第三步，过滤器不再工作。

我已经试着解决这个问题好几天了，现在我被困住了。下面是一些处理选项卡之间切换的代码：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr('href');
    if (target === "#TvShowTab") {
      if (!$('#tvList').mixItUp('isLoaded')) {
        $('#tvList').mixItUp();
      }
    }
    if (target === "#MoviesTab") {
      if (!$('#movieList').mixItUp('isLoaded')) {
            $('#movieList').mixItUp();
      }
    }
});

Answer 1

我已经能够解决这个问题，确保调用mixItUp(‘破坏’)时，标签被按下。

if (target === "#TvShowTab") {
  if ($('#movieList').mixItUp('isLoaded'))
  {       
    $('#movieList').mixItUp('destroy');  
  }      
  if (!$('#tvList').mixItUp('isLoaded')) {
    $('#tvList').mixItUp();        
  }
}

如果希望筛选器在选项卡中持久存在，可以在运行破坏api之前使用mixItUp('getState')。这是添加的样子。

$(function() {
$('#movieList').mixItUp();


$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = $(e.target).attr('href');
    var activeState = ''
    if (target === "#TvShowTab") {
        if ($('#movieList').mixItUp('isLoaded')) {
            activeState = $('#movieList').mixItUp('getState');
            $('#movieList').mixItUp('destroy');
        }
        if (!$('#tvList').mixItUp('isLoaded')) {
            $('#tvList').mixItUp({
                load: {
                    filter: activeState.activeFilter || 'all',
                    sort: activeState.activeSort || 'default:asc'
                }
            });
        }
    }
    if (target === "#MoviesTab") {
        if ($('#tvList').mixItUp('isLoaded')) {
            activeState = $('#tvList').mixItUp('getState');
            $('#tvList').mixItUp('destroy');
        }
        if (!$('#movieList').mixItUp('isLoaded')) {
            $('#movieList').mixItUp({
                load: {
                    filter: activeState.activeFilter || 'all',
                    sort: activeState.activeSort || 'default:asc'
                }
            });
        }
    }
});
});