Lors de l'utilisation Materialise (ce qui est advenu des commentaires des questions originales) l'élément de sélection ne se déclenche pas un événement change
. Vous devez écouter l'événement jQuery change
et déclencher un CustomEvent
dans le gestionnaire d'événements.
Comme ceci:
_suspendUpdate = false;
attached() {
$(this.option).material_select()
$(this.option).on('change', e => {
if (!this._suspendUpdate) {
let customEvent = new CustomEvent('change', {});
this._suspendUpdate = true;
this.option.dispatchEvent(customEvent);
this._suspendUpdate = false;
}
});
}
Note: le suspendUpdate
« truc » est nécessaire parce qu'un change
CustomEvent provoque également jQuery pour tirer son propre événement change
qui provoque une boucle infinie.
Le modèle de vue de l'extrait ci-dessus:
<template>
<require from="materialize/dist/css/materialize.css"></require>
<div class="input-field col s12">
<select ref="option" value.bind="optionSelect">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<p>Selected value: ${optionSelect}</p>
</div>
</template>
Voici aussi une gist.run qui illustre cette approche: https://gist.run/?id=4e7dd11228407e765844570409d210bd
Bien sûr, si vous utilisez Materialise avec Aurelia, vous pouvez utilisez également le pont Materialize: http://aurelia-ui-toolkits.github.io/demo-materialize/#/about
Avertissement: Je suis l'un des créateurs du pont Aurelia Materialise.
Vous pouvez utiliser des sélecteurs jquery uniquement sur 'joint() {...}' cas de vous composant (après le rendu DOM). – JayDi
@JayDi désolé, ce que vous voulez dire jquery sélecteurs? comme $ ('# xx'). val()? – sibi
Oui, c'est. Comme: $ ('# dateStart'). Datetimepicker ({locale: 'ru', format: 'JJ.MM.AAAA'}); – JayDi