Aurelia语义下拉列表 [英] Aurelia Semantic dropdown

问题描述

我正在尝试在Aurelia中使用一个组合框，以便我的用户可以输入下拉列表并搜索内容。我试图合并Semantic创建的那个，但是当我调用该元素的下拉列表时它不会运行代码，因此它保持正常的下拉列表。就像这里的州示例

I am trying to use a combo 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.com/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?

推荐答案

首先，安装SemanticUI包。使用JSPM运行此行以从Github安装它：

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

它还将安装jQuery作为依赖项。之后，您将能够将SemantinUI的jQuery插件和样式导入到视图模型中。 View-model可以是这样的：

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>

几个笔记。您需要提供 ref 属性以从视图模型引用HTMLElement，这样您就不必将CSS选择器硬编码到VM中。

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.

在自定义语义下拉列表更改选择后，Aurelia也不会自动获取正确的值。在这种情况下，您只需使用onchange事件手动更新模型。

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.

演示： http://plnkr.co/edit/vJcR7n?p=preview

这篇关于Aurelia语义下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！