Aurelia Two-Way Binding не работает должным образом

Question

Я пытаюсь выполнить двустороннюю привязку в 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> 

часового пояса-подборщика. 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> 

Answer 1

Вы должны использовать <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>