Tri des données dynamiques avec l'isotope

Question

J'essaie d'utiliser Isotope.js pour trier les données par type. Il semble y avoir quelques façons de faire cela, mais ils exigent tous que vous connaissez les variables de tri avant la main.

L'un des meilleurs exemples de ce dont je parle se trouve dans this question.

Dans l'exemple, ils tentent de trier par classe, par exemple regrouper tous les éléments avec la classe .milk comme ceci:

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

A jsFiddle est fourni ici: http://jsfiddle.net/Yvk9q/9/

Mon problème:

Je tire les catégories (classes ou type de données) d'une base de données générée par l'utilisateur. Pour cette raison, je ne peux pas simplement ajouter toutes les variables de tri au code avant la main.

J'ai joué avec le violon et j'ai eu un tri semi-fonctionnel ici: http://jsfiddle.net/BandonRandon/erfXH/1/ en utilisant data-category au lieu de la classe. Cependant, cela trie toutes les données par ordre alphabétique et non par catégorie réelle.

Quelques solutions possibles:

1. Utilisez JSON pour retourner un tableau de toutes les catégories, puis l'utiliser pour une boucle à travers les classes
2. Utilisez ligne javascript et exécuter une boucle PHP dans une balise <script>
3. Ecrit un fichier PHP externe avec un en-tête javascript

Ce que je suis Pour
La meilleure approche la plus simple ici, étant si c'est l'une des solutions ci-dessus ou quelque chose de différent. Cela ne semble pas devoir être aussi compliqué. Donc, je peux être compliquer cela.

EDIT:

J'ai maintenant un tableau JSON de mes données, mais je ne peux pas comprendre comment transmettre les données dans les paramètres isotopiques lorsque je tente quelque chose comme ça

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); 

Il échoue parce que je ne peux pas utiliser une boucle à l'intérieur des paramètres du plugin. Je ne suis pas sûr de ce que l'on peut faire à ce sujet.

EDIT 2:

Je trouve this question qui semble à ce que je suis en train de faire, mais malheureusement, le most recent jsfiddle échoue avec l'isotope

Voici un échantillon de mon 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...} 

J'utilise le slug comme nom de classe et dans ma boucle.

Answer 1

Je ne suis pas sûr que je comprends tout à fait votre question, mais je vais exprimer mes hypothèses et de travail à partir de là:

• Vous avez des données dans un format tel que décrit ci-dessus:

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

• Vous souhaitez trier les noms slug, même si nous ne savons pas quels seront les slugs nommés à l'avance.

En supposant que ces deux choses, le violon que vous avez lié à est proche, mais il a un problème en raison de la fermeture qui I have fixed.

Comme prévu, votre situation est similaire à celle indiquée, sauf que vous devez d'abord obtenir les données JSON, comme vous l'avez fait.

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); 
    }); 
});