Created
November 4, 2015 21:42
-
-
Save krmeda/d47eb1f3e1f374549385 to your computer and use it in GitHub Desktop.
Aurelia Select Wierd Behavior
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <section> | |
| <h2>${heading}</h2> | |
| <form submit.delegate="submit()" reset.delegate="reset()"> | |
| <div if.bind="!shouldSwitchView"> | |
| <div> | |
| <label>First Name</label> | |
| <input type="text" value.bind="firstName"> | |
| </div> | |
| <div> | |
| <label>Last Name</label> | |
| <input type="text" value.bind="lastName"> | |
| </div> | |
| <div> | |
| <label>Full Name</label> | |
| <p>${fullName}</p> | |
| </div> | |
| <div> | |
| <select value.bind="selectedCountry" id="countryName"> | |
| <option>-Select Country Name-</option> | |
| <option repeat.for="country of countryList" model.bind="country">${country.name}</option> | |
| </select> | |
| </div> | |
| <button type="submit">Submit</button> | |
| <button type="reset">Reset</button> | |
| </div> | |
| <div if.bind="shouldSwitchView"> | |
| Switched screen | |
| <button type="reset">Reset</button> | |
| </div> | |
| </form> | |
| </section> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {computedFrom} from "aurelia-framework"; | |
| interface ICountry { | |
| code: string; | |
| name: string; | |
| regions: IRegion[]; | |
| } | |
| interface IRegion { | |
| code: string; | |
| name: string; | |
| } | |
| export class Welcome { | |
| heading = 'Welcome to the Aurelia Navigation App!'; | |
| firstName = 'John'; | |
| lastName = 'Doe'; | |
| public countryList: ICountry[]; | |
| constructor() { | |
| // For testing purpose initialize Country List here. - Ideally get it from a service | |
| this.countryList = [ | |
| { code: 'US', name: 'United States of America', regions: [{ code: 'US-AL', name: 'Alabama' }, { code: 'US-AK', name: 'Alaska' }] }, | |
| { code: 'AI', name: 'Anguilla', regions: undefined }, | |
| { code: 'AU', name: 'Australia', regions: [{ code: 'AU-NSW', name: 'New South Wales' }, { code: 'AU-QLD', name: 'Queensland' }] } | |
| ]; | |
| this.shouldSwitchView = false; | |
| } | |
| public selectedCountry: ICountry; | |
| public selectedRegion: IRegion; | |
| public shouldSwitchView: boolean; | |
| @computedFrom('selectedCountry') | |
| public get shouldShowRegion() { | |
| if (this.selectedCountry) { | |
| if (this.selectedCountry.regions) { | |
| if (this.selectedCountry.regions.length > 0) { | |
| return true; | |
| } | |
| } | |
| } | |
| return false; | |
| } | |
| get fullName() { | |
| return `${this.firstName} ${this.lastName}`; | |
| } | |
| reset() { | |
| this.shouldSwitchView = false; | |
| this.selectedCountry = undefined; | |
| } | |
| submit() { | |
| this.shouldSwitchView = true; | |
| alert(`Welcome, ${this.fullName}!`); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment