Aurelia Semantic dropdown

Question

J'essaie d'utiliser une zone de liste déroulante dans Aurelia pour que mes utilisateurs puissent taper une liste déroulante et rechercher le contenu. J'essayais d'incorporer celui que Semantic avait créé, mais quand j'appelle dropdown sur l'élément, il ne lance pas le code, donc ça reste une liste déroulante normale. Comme l'exemple de l'État ici

http://semantic-ui.com/modules/dropdown.html

Quelle est la meilleure façon de s'y prendre pour le faire, quelqu'un at-il encore fait cela, ou peut penser à une bonne façon de mettre en œuvre cette fonctionnalité?

Answer 1

Tout d'abord, installez le package SemanticUI. Avec JSPM exécutez cette ligne pour l'installer à partir de Github:

Il installera également jQuery en tant que dépendance. Après cela, vous pourrez importer les plugins et les styles jQuery de SemantinUI dans votre view-model. Voir le modèle peut être quelque chose comme ça alors:

import {semanticUI} from 'semantic-ui'; 
import states from './states-list'; 

export class States { 

    constructor() { 
     this.states = states; // or load states with http-client, etc. 
    } 

    attached() { 
     $(this.statesSelect).dropdown().on('change', e => { 
      this.stateSelected = e.target.value; 
     }); 
    } 
} 

et vous pouvez rendre modèle avec les états liste:

<template> 

    <p>Selected: ${stateSelected}</p> 

    <select ref="statesSelect" value.bind="stateSelected" class="ui search dropdown"> 
     <option value="">State</option> 
     <option value="${state.code}" 
       model.bind="state.name" 
       repeat.for="state of states">${state.name}</option> 
    </select> 

</template> 

Couple de notes. Vous devez fournir l'attribut ref pour référencer HTMLElement à partir de view-model, de cette façon vous n'avez pas besoin de coder en dur les sélecteurs CSS dans VM.

Apparemment, Aurelia ne récupère pas la valeur correcte automatiquement après la sélection personnalisée des modifications de la liste déroulante sémantique. Dans ce cas, vous pouvez simplement mettre à jour le modèle manuellement avec l'événement onchange.

Démo:http://plnkr.co/edit/vJcR7n?p=preview