1

Am nouvelle Aurelia Js, ici, je utilise une boîte de sélection simple mais sa ne fonctionne pas tout en changeant la valeur.Aurelia Js boîte de sélection ne fonctionne pas

HTML:

<select value.bind="selectVal" change.delegate="changed()"> 
         <option value="" disabled selected>Doc.Type</option> 
         <option value="1">Option 1</option> 
         <option value="2">Option 2</option> 
         <option value="3">Option 3</option> 
        </select> 

Modèle: this.selectVal = ''; changed(){ alert(); } change.delegate ne déclenche pas en changer la valeur. En outre, la valeur datepicker ne se charge pas dans le modèle. Quel sera le problème? Est-ce tout de ma fin ou de la forme Aurelia js issue.

+0

Vous pouvez utiliser des sélecteurs jquery uniquement sur 'joint() {...}' cas de vous composant (après le rendu DOM). – JayDi

+0

@JayDi désolé, ce que vous voulez dire jquery sélecteurs? comme $ ('# xx'). val()? – sibi

+0

Oui, c'est. Comme: $ ('# dateStart'). Datetimepicker ({locale: 'ru', format: 'JJ.MM.AAAA'}); – JayDi

Répondre

2

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.

+0

Salut daniel, j'ai essayé votre code, il renvoie une erreur de console 'app.js: 8 Uncaught RangeError: taille de la pile d'appel maximal dépassé.j'ai besoin de déclencher une fonction, au changement. – sibi

+0

Mis à jour. Je ne suis pas sûr si le 'this' dans le gestionnaire jQuery' change' fonctionne réellement parce que jQuery le réassigne .. Si c'est le cas, vous devrez assigner 'this' à un autre var et l'utiliser dans le gestionnaire. – Daniel

+0

Merci daniel, ça a vraiment bien marché. Merci beaucoup. – sibi