Matérialiser CSS-Select ne semble pas rendre

La conception de la fonctionnalité select dans materialize CSS est, à mon avis, une assez bonne raison de ne pas l'utiliser.

Vous devez initialiser l'élément select avec material_select(), comme le mentionne @littleguy23. Si vous ne le faites pas, la boîte de sélection n'est même pas affichée! Dans une application jQuery à l'ancienne, je peux l'initialiser dans la fonction document ready. Devinez quoi, ni moi ni beaucoup d'autres personnes utilisent jQuery ces jours-ci, et nous n'initialisons pas nos applications dans le document prêt crochet.

Créé Dynamiquement sélectionne. Que se passe-t-il si je crée des sélections dynamiquement, comme cela se produit dans un framework comme Ember qui génère des vues à la volée? Je dois ajouter de la logique dans chaque vue pour initialiser la boîte de sélection chaque fois qu'une vue est générée, ou écrire un mixin de vue pour gérer cela pour moi. Et c'est pire que cela: lorsque la vue est générée, et en termes de braise didInsertElement est appelée, la liaison à la liste des options pour la boîte de sélection n'a peut-être pas encore été résolue, donc je besoin d'une logique spéciale observant la liste d'options pour attendre qu'elle soit remplie avant de faire l'appel au material_select. Si les options changent, comme elles le pourraient facilement, material_select n'en a aucune idée et ne met pas à jour la liste déroulante. Je peux appeler material_select à nouveau lorsque les options changent, mais il semble que cela ne fait rien (est ignoré).

En d'autres termes, il semble que l'hypothèse de conception derrière les boîtes de sélection de materialize CSS est qu'elles sont toutes là au chargement de la page, et que leurs valeurs ne changement.

La mise en Œuvre. D'un point de vue esthétique, Je ne suis pas non plus en faveur de la façon dont materialize CSS implémente ses listes déroulantes, qui consiste à créer un ensemble parallèle d'éléments d'ombre ailleurs dans le DOM. Certes, des alternatives telles que select2 font la même chose, et il n'y a peut-être pas d'autre moyen d'obtenir certains des effets visuels (vraiment?). Pour moi, cependant, quand j'inspecte un élément, je veux voir l'élément, pas une version d'ombre ailleurs que quelqu'un comme par magie créé.

Quand Ember déchire la vue, Je ne suis pas sûr que materialize CSS déchire les éléments d'ombre qu'il a créés. En fait, je serais très surpris si c'était le cas. Si ma théorie est correcte, car les vues sont générées et détruites, votre DOM finira par être pollué avec des dizaines d'ensembles de listes déroulantes d'ombre non connectées à quoi que ce soit. Cela s'applique non seulement à Ember mais à tout autre framework frontal OPA basé sur MVC / template.

Les Liaisons. J'ai aussi pas été capable de comprendre comment obtenir la valeur sélectionnée dans la boîte de dialogue pour se lier à tout ce qui est utile dans un framework comme Ember qui appelle des boîtes de sélection via une interface de type {{view 'Ember.Select' value=country}}. En d'autres termes, lorsque quelque chose est sélectionné, country n'est pas mis à jour. C'est un deal-breaker.

Les Ondes. En passant, les mêmes problèmes s'appliquent à l'effet "vague" sur les boutons. Vous devez l'initialiser chaque fois qu'un bouton est créé. Personnellement, je ne me soucie pas de l'effet d'onde, et ne pas comprenez de quoi il s'agit, mais si vous voulez des vagues, sachez que vous passerez une bonne partie du reste de votre vie à vous soucier de la façon d'initialiser chaque bouton lors de sa création.

J'apprécie l'effort fait par les gars de materialize CSS, et il y a de beaux effets visuels là-bas, mais c'est trop gros et a trop de pièges tels que ceux ci-dessus pour être quelque chose que j'utiliserais. Je prévois maintenant d'extraire matérialiser CSS de mon application et de revenir soit à Bootstrap ou une couche sur le dessus du costume CSS. Vos outils devraient vous rendre la vie plus facile, pas plus difficile.

@littleguy23 C'est exact, mais vous ne voulez pas le faire à sélection multiple. Donc, juste un petit changement au code:

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

La solution qui a fonctionné pour moi est d'appeler la fonction' material_select ' après le chargement des données d'options. Si vous imprimez la valeur de OptionsList.trouver().count() à la console c'est d'abord 0 puis quelques millisecondes plus tard, la liste est remplie de données.

Template.[name].rendered = function() {
this.autorun(function() {
    var optionsCursor = OptionsList.find().count();
    if(optionsCursor > 0){
         $('select').material_select();
    }
});

};

Si vous utilisez Angularjs, vous pouvez utiliser le plugin angular-materialize , qui fournit des directives pratiques. Ensuite, vous n'avez pas besoin d'initialiser dans le js, ajoutez simplement material-select à votre select:

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>

Pour moi aucune des autres réponses n'a fonctionné parce que j'utilise la dernière version de MaterializeCSS et Meteor et il y a une incompréhabilité entre les versions de jQuery, Meteor 1.1.10 utilise jquery 1.11 (remplacer cette dépendance n'est pas facile et va probablement casser Meteor/Blaze) et tester Materialise avec jQuery 2.2 fonctionne bien. Voir https://stackoverflow.com/a/34809976/2882279 pour plus d'informations.

C'est un problème connu avec les listes déroulantes et les sélections dans materialize 0.97.2 et 0.97.3; pour plus d'informations, voir https://github.com/Dogfalo/materialize/issues/2265 et https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

J'utilise la version Sass de MaterializeCSS dans Meteor et j'ai contourné le problème en utilisant poetic:materialize-scss@1.97.1 dans mon fichier de paquets meteor pour forcer l'ancienne version. Les listes déroulantes fonctionnent maintenant, old jquery et tout!

Cela fonctionne aussi: class = "navigateur par défaut"

Appelez le code jQuery CSS materialize uniquement après le rendu du code html. Vous pouvez donc avoir un contrôleur, puis déclencher un service qui appelle le code jquery dans le contrôleur. Cela rendra le bouton de sélection correct. Cependant, si vous essayez d'utiliser ngChange ou ngSubmit, cela peut ne pas fonctionner en raison du style dynamique de la balise select.

, je me suis retrouvé dans une situation où l'utilisation de la solution sélectionnée

$(document).ready(function() {
$('select').material_select();
}); 

Pour une raison quelconque lançait des erreurs car la fonction material_select () n'a pas pu être trouvée. Il n'était pas possible de simplement dire <select class="browser-default... Parce que j'utilisais un framework qui rendait automatiquement les formulaires. Donc, ma solution était d'ajouter la classe en utilisant js (Jquery)

<script>
 $(document).ready(function() {
   $('select').attr("class", "browser-default")
});

Tout d'abord, assurez-vous de l'initialiser dans le document.prêt comme ceci:

$(document).ready(function () {
    $('select').material_select();
});

Ensuite, remplissez-le avec vos données comme vous le souhaitez. Mon exemple:

    function FillMySelect(myCustomData) {
       $("#mySelect").html('');

        $.each(myCustomData, function (key, value) {
           $("#mySelect").append("<option value='" + value.id+ "'>" + value.name + "</option>");
        });
}

Assurez-vous après avoir terminé avec la population, de déclencher ce contentChanged comme ceci:

$("#mySelect").trigger('contentChanged');

Juste pour suivre cela puisque la réponse supérieure recommande de ne pas utiliser materializecss... dans la version actuelle de matérialiser vous n'avez plus besoin d'initialiser sélectionne.