Aurelia 语义下拉菜单

问题描述

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

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

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=预览

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