BootstrapタブでMixItUpの問題

Question

私はブートストラップタブでMixitUpを使用しようとしていますが、今は少し読むとthingsですが、問題は解決していません。

Thisも、私は、最小限のコードでcodepenで問題を再現することができた問題に

を解決しません。 http://codepen.io/anon/pen/aNWwZL

異なるタブでフィルタを適用すると、動作が停止するという問題があります。

リプロ：

1. もはやフィルタ第三段階では

再びタブ1でフィルタを試してみませんし、適用するタブ2

にフィルタを適用するタブ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' 
       } 
      }); 
     } 
    } 
}); 
});