javascript - Aurelia Semantic dropdown - Stack Overflow

admin管理员组

文章数量:1287665

I am trying to use a bo box in Aurelia so that my users can type in a drop down and search the contents. I was trying to incorporate the one that Semantic had created, but when I call dropdown on the element it doesn't run the code, so it stays a normal dropdown. Like the state example here

.html

What's the best way to go about doing this, has anyone done this yet, or can think of a good way to implement this functionality?

I am trying to use a bo box in Aurelia so that my users can type in a drop down and search the contents. I was trying to incorporate the one that Semantic had created, but when I call dropdown on the element it doesn't run the code, so it stays a normal dropdown. Like the state example here

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

What's the best way to go about doing this, has anyone done this yet, or can think of a good way to implement this functionality?

• javascript
• semantic-ui
• aurelia

Share Improve this question Follow edited Jul 30, 2015 at 22:48 dfsq 193k2626 gold badges242242 silver badges259259 bronze badges asked Jul 30, 2015 at 18:32 Ashley SchuettAshley Schuett 19222 silver badges88 bronze badges 1

• I've written a blog about creating custom elements for wrapping css frameworks here: davismj.me/blog/semantic-custom-element – Matthew James Davis Commented Aug 2, 2016 at 17:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

First of all, install SemanticUI package. With JSPM run this line to install it from Github:

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

It will also install jQuery as dependency. After that you will be able to import SemantinUI's jQuery plugins and styles into your view-model. View-model can be something like this then:

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

and then you can render template with states list:

<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 of notes. You need to provide ref attribute to reference HTMLElement from view-model, this way you don't have to hardcode CSS selectors into VM.

Also looks like Aurelia doesn't pick up proper value automatically after custom Semantic dropdown changes selection. In this case you can simply update model manually with onchange event.

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

本文标签： javascriptAurelia Semantic dropdownStack Overflow