Aurelia双向装订无法正常工作

Question

我正在尝试在Aurelia中进行双向绑定，但似乎无法使其正常工作。

所以我有create.html其中selectedTimeZone.two-way="timeZone" TimeZone.two selectedTimeZone.two-way="timeZone" 。 我试图通过做<div if.bind="timeZone">Main: ${timeZone}</div>来显示它正在工作并具有约束力的事实。 但这永远timeZone ，而且timeZone的值也从未绑定。

在time-zone-picker.html它似乎确实可以正常工作。 我有<div if.bind="selectedTimeZone">This is working! ->${selectedTimeZone}</div> <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>

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>

时区picker.js：

import Timezones from 'timezones.json';

export class TimeZonePicker {
  constructor() {
    this.timezones = Timezones;
  }
}

编辑

在下面添加代码以匹配下面的响应。 仍无法使其与以下更改一起使用：

时区选择器

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

<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>

Answer 1

您应该仅将<template bindable="...">用于仅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>

时区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>