Aurelia Semantic dropdown

Question

Sto cercando di utilizzare una casella combinata in Aurelia in modo che i miei utenti possano digitare un menu a discesa e cercare i contenuti. Stavo cercando di incorporare quello che Semantic aveva creato, ma quando chiamo dropdown sull'elemento non esegue il codice, quindi rimane un normale dropdown. Come l'esempio dello stato qui

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

Qual è il modo migliore per andare a fare questo, qualcuno ha ancora fatto questo, o può pensare di un buon modo per implementare questa funzionalità?

Answer 1

Prima di tutto, installare il pacchetto SemanticUI. Con JSPM eseguire questa riga per installarlo da Github:

jspm install semantic-ui=github:Semantic-Org/Semantic-UI 

Installerà anche jQuery come dipendenza. Dopodiché sarai in grado di importare i plugin e gli stili jQuery di SemantinUI nel tuo modello di visualizzazione. View-modello può essere qualcosa di simile, allora:

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

e quindi si può rendere modello con la lista Uniti:

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

paio di note. È necessario fornire l'attributo ref per fare riferimento a HTMLElement dal modello di visualizzazione, in questo modo non è necessario codificare i selettori CSS in VM.

Sembra che Aurelia non rilevi automaticamente il valore corretto dopo che il menu a discesa Semantica personalizzato cambia selezione. In questo caso è possibile aggiornare semplicemente il modello manualmente con l'evento onchange.

Demo:http://plnkr.co/edit/vJcR7n?p=preview