Javascript Aurelia双向装订无法正常工作
我试图在奥雷利亚进行双向绑定,但似乎无法使其正常工作 所以我创建了create.html,它选择了timeZone.two-way=timeZone。我试图通过执行Main:${timeZone}来显示它正在工作和绑定的事实。但这永远不会起作用,时区的值也永远不会受到限制 在time-zone-picker.html中,它似乎确实在那里工作。我知道这个正在工作!->${selectedTimeZone}工作正常 范例 主模板create.html: 编辑 添加下面的代码以匹配下面的响应。仍然无法使用以下更改使其正常工作: timezone-picker.jsJavascript Aurelia双向装订无法正常工作,javascript,aurelia,Javascript,Aurelia,我试图在奥雷利亚进行双向绑定,但似乎无法使其正常工作 所以我创建了create.html,它选择了timeZone.two-way=timeZone。我试图通过执行Main:${timeZone}来显示它正在工作和绑定的事实。但这永远不会起作用,时区的值也永远不会受到限制 在time-zone-picker.html中,它似乎确实在那里工作。我知道这个正在工作!->${selectedTimeZone}工作正常 范例 主模板create.html: 编辑 添加下面的代码以匹配下面的响应。仍然无法
import { bindable, bindingMode } from 'aurelia-framework';
import Timezones from 'timezones.json';
export class TimeZonePicker {
@bindable({ defaultBindingMode: bindingMode.twoWay }) selectedTimeZone;
constructor() {
this.timezones = Timezones;
}
}
timezone-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>
您应该只对html自定义元素使用。在您的情况下,您应该这样做:
timezone-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>
您应该只对html自定义元素使用。在您的情况下,您应该这样做:
timezone-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>
所以我按照你上面的建议做了。然而,在我的create.html中,我仍然无法将其绑定。MAIN${timeZone}您应该使用所选时区。双向=时区,而不是所选时区。双向=时区。混合的大小写变量应该在HTMLH中连字符,这是缺少的。“为什么需要破折号呢?”allencoded这么说,我按照你上面的建议做了。然而,在我的create.html中,我仍然无法将其绑定。MAIN${timeZone}您应该使用所选时区。双向=时区,而不是所选时区。双向=时区。混合的大小写变量应该在HTMLH中连字符,这是缺少的。“为什么在那里需要破折号呢?”阿连科说
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;
}
}
<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>