首先,安装 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 事件手动更新模型。
Demo: http://plnkr.co/edit/vJcR7n?p=preview