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

Aurelia 语义下拉列表

Aurelia Semantic dropdown

javascript

semantic-ui

aurelia