Aurelia Semantic dropdown

Question

Próbuję użyć pola kombi w Aurelia, aby moi użytkownicy mogli wpisać listę rozwijaną i przeszukać zawartość. Próbowałem włączyć ten, który został stworzony przez Semantic, ale kiedy wywołuję rozwijanie tego elementu, to nie uruchamia on kodu, więc pozostaje normalnym rozwijaniem. Podobnie jak w przykładzie tutaj państwowej

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

Jaki jest najlepszy sposób, aby przejść o to zrobić, czy ktoś zrobił to jeszcze, czy można myśleć o dobrym sposobem realizacji tej funkcji?

Answer 1

Po pierwsze, zainstaluj pakiet SemanticUI. Za pomocą JSPM uruchom tę linię, aby zainstalować ją z Github:

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

Zainstaluje również jQuery jako zależność. Następnie będziesz mógł zaimportować wtyczki i style jQuery SemantinUI do swojego modelu widoku. Zobacz model może być coś takiego następnie:

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

a następnie można uczynić szablon z listy stanów:

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

Kilka notatek. Musisz podać atrybut ref, aby odwoływać się do HTMLElement z modelu widoku, w ten sposób nie musisz wciskać selektorów CSS na maszynę wirtualną.

Wygląda również na to, że Aurelia nie pobiera właściwej wartości automatycznie po selekcji niestandardowych zmian w menu rozwijanym. W takim przypadku można po prostu zaktualizować model ręcznie za pomocą zdarzenia onchange.

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