问题描述
我正在尝试在Aurelia中使用一个组合框，以便我的用户可以输入下拉列表并搜索内容。 我试图合并Semantic创建的那个，但是当我调用该元素的下拉列表时它不会运行代码，因此它保持正常的下拉列表。 就像这里的州示例
这样做的最佳方式是什么，有人做过这个，还是想到实现这个功能的好方法？
1楼
dfsq
13
已采纳
2015-07-30 22:47:59
首先，安装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事件手动更新模型。
演示： ：