javascript - 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 模型中。 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 属性以从 View 模型中引用 HTMLElement，这样您就不必将 CSS 选择器硬编码到 VM 中。

另外看起来 Aurelia 在自定义语义下拉列表更改选择后不会自动选择正确的值。在这种情况下，您可以简单地使用 onchange 事件手动更新模型。

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