使用Isotope對動態數據進行排序

Question

我試圖使用Isotope.js按類型對數據進行排序。 似乎有幾種方法可以做到這一點，但它們都要求您事先知道排序變量。

在這個問題中找到了我正在談論的最好的例子之一。

在示例中，他們嘗試按類排序，例如使用類.milk對所有元素進行排序，如下所示：

milk: function( $elem ) {
    var isMilk = $elem.hasClass('milk');
    return (!isMilk?' ':'');
},

這里提供了一個jsfiddle： http ： //jsfiddle.net/Yvk9q/9/

我的問題：

我從用戶生成的數據庫中提取類別（類或數據類型）。 出於這個原因，我不能簡單地將所有排序變量添加到代碼中。

我玩小提琴並在這里得到一個半工作類： http ： //jsfiddle.net/BandonRandon/erfXH/1/使用data-category而不是類。 但是，這只是按字母順序排序所有數據，而不是按實際類別排序。

一些可能的解決方

1. 使用JSON返回所有類別的數組，然后使用它來循環遍歷類
2. 使用內聯javascript並在<script>標記內運行PHP循環
3. 使用javascript標頭編寫外部PHP文件

我正在尋找什么
這里最簡單的最佳方法，如果它是上述解決方案之一或不同之處。 這似乎不應該是這樣復雜的。 所以我可能會因此而復雜化。

編輯：

我現在有一個我的數據的json數組但我無法弄清楚當我嘗試這樣的東西時如何將數據傳遞到同位素設置

var $container = $('.sort-container');

var opts = {
    itemSelector: '.member-item',
    layoutMode: 'straightDown',
    getSortData : {
        $.getJSON( 'member-cat-json.php', function(data) { 
            $.each(data, function(i, item) {
                var slug = data[i].slug;
                slug : function( $elem ) {
                    var is+slug = $elem.hasClass(slug);
                    return (!is+slug?' ':'');
                    }
                }
            }); 
        });
    }                                       
}

var $container = $('.sort-container');

$container.isotope(opts);

它失敗了，因為我無法在插件設置中使用循環。 不知道可以做些什么呢。

編輯2：

我發現這個問題似乎與我想要做的事情有關但不幸的是，最近的jsfiddle失敗了同位素

以下是我的JSON輸出示例：

{term_id:9, name:Milk, slug:milk, term_group:0, term_taxonomy_id:17...}
{term_id:9, name:Eggs, slug:eggs, term_group:0, term_taxonomy_id:17...}

我使用slug作為類名和循環。

Answer 1

我不確定我完全理解你的問題，但我會說明我的假設並從那里開始工作：

• 您擁有上述格式的數據：

  {term_id:9, name:Milk, slug:milk, term_group:0, term_taxonomy_id:17...}

• 你想對slug名稱進行排序，即使我們不知道slu will將提前命名的是什么。

假設這兩件事，你聯系到的小提琴很接近，但由於我已修復的閉包而出現問題。

正如預期的那樣，您的情況與列出的情況類似，不同之處在於您需要首先獲取JSON數據。

var $container = $('.sort-container'),
    createSortFunction = function(slug) {
        return function($elem) {
            return $elem.hasClass(slug) ? ' ' : '';
        };
    }, 
    getSortData = function(data) {
        var sortMethods = {};

        for (var index in data) {
            var slug = data[index].slug;

            // immediately create the function to avoid
            // closure problems
            sortMethods[slug] = createSortFunction(slug);
        }

        return sortMethods;
    }

$.getJSON('member-cat-json.php', function (data) {
    // I'm wrapping the isotop creation inside the `getJSON`
    // call, just to ensure that we have `data`

    $container.isotope({
        itemSelector: '.member-item',
        layoutMode: 'straightDown',
        getSortData: getSortData(data);
    });
});