使用 MixItUp 过滤动态数据答案

【问题标题】：Filtering dynamic data with MixItUp使用 MixItUp 过滤动态数据
【发布时间】：2015-09-04 08:34:41
【问题描述】：

我正在尝试使用 MixItUp 过滤在 AJAX 回调方法中动态创建的数据。我有 10 个部分，每个部分都有一个或多个过滤器。我面临的问题是，当我单击一个部分的过滤器时，所有其他部分的数据都会被隐藏。当我检查 DOM 时，没有发生覆盖以显示 none 来阻止。过滤器值都是唯一的。

    // The "bindHandlers" method will listen for whenever a button is clicked. 
bindHandlers: function () {
    var self = this;
    self.$filters.on('click', 'a', function (e) {
        self.parseFilters();
    });
},

parseFilters: function () {
    var self = this;
    // loop through each filter group and grap the active filter from each one.
    for (var i = 0, group; group = self.groups[i]; i++) {
        group.active = [];
        group.$inputs.each(function () {
            if ($(this).find('.selected').length > 0) {
                group.active.push($(this).attr('data-filter'));
            }
        });
    }
    self.concatenate();
},

concatenate: function () {
    var self = this;

    self.outputString = ''; // Reset output string

    for (var i = 0, group; group = self.groups[i]; i++) {
        self.outputString += group.active;
    }

    // If the output string is empty, show all rather than none:    
    !self.outputString.length && (self.outputString = 'all');

    // Send the output string to MixItUp via the 'filter' method:    
    if (self.$container.mixItUp('isLoaded')) {
        self.$container.mixItUp('filter', self.outputString);
    }
}

上面的代码是用 AJAX 回调函数编写的，点击事件会触发 parseFilter 函数并达到连接，并且 outputString 仅包含正确的过滤器名称，但它仍然隐藏了所有其他让我感到困惑的部分图块。

谁能帮帮我。据我从谷歌搜索中了解到的，我们需要为 data-filter 设置一个值，并给出与过滤元素的类名相同的值。我也在使用 Knockout 来绑定数据

【问题讨论】：

标签： jquery html knockout-2.0 mixitup

【解决方案1】：

我终于能够实现它。我不知道它是完美的解决方案，但我就是这样做的。

对于每个有两个 div 的部分，一个用于过滤器按钮，第二个用于报告图块，我给出了唯一的类（过滤器 div）和 id（报告图块），并且在 AJAX 回调函数中我绑定了这样的代码

function SetSectionOneData() {

var $container = $('#SectionOneReports'), // Report tiles holding container id. 
$controls = $('.cd-tab-filter');  // Filter button holding div

$container.mixItUp({
    animation: {
        duration: 700,
        effects: 'fade translateY(600%) stagger(35ms)',
        easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
        reverseOut: true
    },
    controls: {
        enable: false
    }
});

$controls.on('click', '.filter', function () {
    var $btn = $(this),
        filter = $btn.attr('data-filter');
     $btn.addClass('FltrBtn_active'); 
    var btnId = $btn.attr('id');
    if (btnId) {
        var productId = btnId.split('_')[1];
        var linkId = btnId.split('_')[2];
        $('*[id*=Filter_' + productId + ']:visible').each(function () {
            if ($(this).attr('id').split('_')[2] != linkId) {
                $(this).removeClass('FltrBtn_active');
            }
        });
    }
    $container.mixItUp('filter', 'none', function () {
        $container.mixItUp('filter', filter);
    });
});

}

如果有人发现有更好/优化的解决方案，请告诉我。

谢谢大家

【讨论】：