我正在尝试在Aurelia进行双向绑定,但我似乎无法使其正常工作。
所以我的create.html有selectedTimeZone.two-way="timeZone"
。我试图通过<div if.bind="timeZone">Main: ${timeZone}</div>
来显示它正在工作和绑定的事实。但这永远不会奏效,价值timeZone
永远不会受到约束。
在time-zone-picker.html
它似乎确实在那里工作。我<div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div>
正常工作。
示例
主要模板( create.html ):
<template>
<require from="../shared/components/time-zone-picker"></require>
<time-zone-picker selectedTimeZone.two-way="timeZone"></time-zone-picker>
<div if.bind="timeZone">Main: ${timeZone}</div>
</template>
时区-picker.html :
<template bindable="selectedTimeZone">
<select class="c-select" value.bind="selectedTimeZone">
<option>Select A Time Zone</option>
<option repeat.for="tz of timezones" model.bind="tz">${tz.text}</option>
</select>
<div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div>
</template>
时区-picker.js:
import Timezones from 'timezones.json';
export class TimeZonePicker {
constructor() {
this.timezones = Timezones;
}
}
修改
添加以下代码以匹配以下回复。仍然无法使用以下更改:
时区-picker.js
import { bindable, bindingMode } from 'aurelia-framework';
import Timezones from 'timezones.json';
export class TimeZonePicker {
@bindable({ defaultBindingMode: bindingMode.twoWay }) selectedTimeZone;
constructor() {
this.timezones = Timezones;
}
}
时区-picker.html
<template>
<select class="c-select" value.bind="selectedTimeZone">
<option>Select A Time Zone</option>
<option repeat.for="tz of timezones" model.bind="tz">${tz.text}</option>
</select>
<div if.bind="selectedTimeZone">${selectedTimeZone}</div>
</template>
create.html上
<template>
<require from="../shared/components/time-zone-picker"></require>
<time-zone-picker selectedTimezone.two-way="timeZone"></time-zone-picker>
<div if.bind="timeZone">MAIN ${timeZone}</div>
</template>
答案 0 :(得分:3)
您应该仅将<template bindable="...">
用于仅限html的自定义元素。在你的情况下,你应该这样做:
<强>时区-picker.html 强>
<template> <-- remove bindable here -->
<select class="c-select" value.bind="selectedTimeZone">
<option>Select A Time Zone</option>
<option repeat.for="tz of timezones" model.bind="tz">${tz.text}</option>
</select>
<div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div>
</template>
<强>时区-picker.js:强>
import {bindable} from 'aurelia-templating'; // or framework
import {bindingMode} from 'aurelia-binding'; // or framework
import Timezones from 'timezones.json';
export class TimeZonePicker {
@bindable({ defaultBindingMode: bindingMode.twoWay }) selectedTimeZone;
constructor() {
this.timezones = Timezones;
}
}
<强> create.html上强>
<template>
<require from="../shared/components/time-zone-picker"></require>
<time-zone-picker selected-time-zone.two-way="timeZone"></time-zone-picker>
<div if.bind="timeZone">Main: ${timeZone}</div>
</template>