i trying two-way bind in aurelia , can't seem able make work properly.
so have create.html has selectedtimezone.two-way="timezone". trying display fact working , binding doing <div if.bind="timezone">main: ${timezone}</div>. never works , value timezone never bound.
in time-zone-picker.html seem work there. have <div if.bind="selectedtimezone">this working! ->${selectedtimezone}</div> working properly.
example
main 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> time-zone-picker.html:
<template bindable="selectedtimezone"> <select class="c-select" value.bind="selectedtimezone"> <option>select time zone</option> <option repeat.for="tz of timezones" model.bind="tz">${tz.text}</option> </select> <div if.bind="selectedtimezone">this working! ->${selectedtimezone}</div> </template> time-zone-picker.js:
import timezones 'timezones.json'; export class timezonepicker { constructor() { this.timezones = timezones; } } edit
adding code below match response below. still unable make work changes below:
time-zone-picker.js
import { bindable, bindingmode } 'aurelia-framework'; import timezones '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 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>
you should use <template bindable="..."> html-only custom elements. in case, should this:
time-zone-picker.html
<template> <-- remove bindable here --> <select class="c-select" value.bind="selectedtimezone"> <option>select time zone</option> <option repeat.for="tz of timezones" model.bind="tz">${tz.text}</option> </select> <div if.bind="selectedtimezone">this working! ->${selectedtimezone}</div> </template> time-zone-picker.js:
import {bindable} 'aurelia-templating'; // or framework import {bindingmode} 'aurelia-binding'; // or framework import timezones '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> 