Aurelia语义下拉列表

Question

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

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

这样做的最佳方式是什么,有人做过这个,还是想到实现这个功能的好方法？

Answer 1

首先,安装SemanticUI包.使用JSPM运行此行以从Github安装它:

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

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

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

然后你可以使用状态列表渲染模板:

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

同样看起来Aurelia在自定义语义下拉列表更改选择后不会自动获取正确的值.在这种情况下,您可以使用onchange事件手动更新模型.

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