Сортировка динамических данных с помощью изотопов

Я пытаюсь использовать 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 и запустите цикл PHP внутри тега <script>
  3. Напишите внешний файл PHP с заголовком javascript

Что я ищу
Самый простой лучший подход здесь, если это одно из решений выше или что-то другое. Это не похоже на то, что это должно быть так сложно. Так что, возможно, я слишком усложняю.

ИЗМЕНИТЬ:

Теперь у меня есть массив 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 в качестве имени класса и в своем цикле.


javascript jquery jquery-plugins jquery-isotope
person Brooke.    schedule 05.04.2013    source источник
comment
Я не очень понимаю вопрос. У вас есть JSON (как указано выше), и вы хотите отсортировать по полю: в данном случае slug. Это правильно?   -  person NT3RP    schedule 11.04.2013

Ответы (1)


arrow_upward
3
arrow_downward

Я не уверен, что полностью понимаю ваш вопрос, но я выскажу свои предположения и буду работать оттуда:

  • У вас есть данные в формате, как описано выше:

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

  • Вы хотите отсортировать по slug именам, хотя мы заранее не знаем, как будут названы слаги.

Предполагая эти две вещи, скрипт, на который вы ссылаетесь, близок, но имеет проблему из-за закрытия, которое I исправили.

Как и ожидалось, ваша ситуация аналогична указанной, за исключением того, что вам нужно сначала получить данные 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);
    });
});
person NT3RP    schedule 11.04.2013
comment
Ты на правильном пути. И понять мои потребности. Но похоже, что у вас есть несколько недостающих точек с запятой. Я думаю, что исправил их, но что-то не так в return sortMethods я создал эту скрипту jsfiddle.net/BandonRandon/788Ur (если вы запустите JSHint, вы увидите некоторые ошибки) - person Brooke.; 12.04.2013
comment
Я исправил ответ, чтобы устранить проблемы JSHint (и включил его как здесь) - person NT3RP; 12.04.2013
comment
Я получаю ошибку javascript SyntaxError: missing variable name, которая определяется как for (var index in data) {. Я присуждаю вам награду, но очень надеюсь, что мы сможем с этим разобраться :) - person Brooke.; 14.04.2013
comment
Нашел проблему; вместо точки с запятой в функции getSortData была запятая. Попробуйте еще раз сейчас. - person NT3RP; 15.04.2013
comment
Потребовалось еще несколько настроек (на самом деле точка с запятой не требовалась), вот код, который я сейчас использую: pastebin.com/ANPpyTdK< /а> - person Brooke.; 16.04.2013