[英]Aurelia Two-Way Binding not working properly
I am trying to two-way bind in Aurelia and I can't seem to be able to make it work properly. 我正在尝试在Aurelia中进行双向绑定,但似乎无法使其正常工作。
So I have create.html which has selectedTimeZone.two-way="timeZone"
. 所以我有create.html其中
selectedTimeZone.two-way="timeZone"
TimeZone.two selectedTimeZone.two-way="timeZone"
。 I am trying to display the fact that it is working and binding by doing <div if.bind="timeZone">Main: ${timeZone}</div>
. 我试图通过做
<div if.bind="timeZone">Main: ${timeZone}</div>
来显示它正在工作并具有约束力的事实。 But this never works and the value timeZone
is never bound. 但这永远
timeZone
,而且timeZone
的值也从未绑定。
In time-zone-picker.html
it does seem to work there. 在
time-zone-picker.html
它似乎确实可以正常工作。 I have <div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div>
我有
<div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div>
<div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div>
working properly. <div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div>
正常工作。
Example 例
Main Template ( create.html ): 主模板( 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>
time-zone-picker.html : time-zone-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>
time-zone-picker.js: 时区picker.js:
import Timezones from 'timezones.json';
export class TimeZonePicker {
constructor() {
this.timezones = Timezones;
}
}
EDIT 编辑
Adding the code below to match a response below. 在下面添加代码以匹配下面的响应。 Still unable to make it work with the changes below:
仍无法使其与以下更改一起使用:
time-zone-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;
}
}
time-zone-picker.html time-zone-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 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>
You should use <template bindable="...">
only for html-only custom elements. 您应该仅将
<template bindable="...">
用于仅html的自定义元素。 In your case, you should do this: 对于您的情况,您应该这样做:
time-zone-picker.html time-zone-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>
time-zone-picker.js: 时区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 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.