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 插件和样式导入您的视图模型。视图模型可以是这样的：

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