Skip to content

Instantly share code, notes, and snippets.

@geleto
Last active September 17, 2016 13:26
Show Gist options
  • Save geleto/4bf7ef1466a13a03b9966114f17cacf2 to your computer and use it in GitHub Desktop.
Save geleto/4bf7ef1466a13a03b9966114f17cacf2 to your computer and use it in GitHub Desktop.
Different behaviour with number and string getter
<template>
<select value.two-way="optionId">
<option repeat.for="choice of options" value.bind="$index">${choice}</option>)
</select>
<label>Number</label>
<br><br>
<select value.two-way="optionId2">
<option repeat.for="choice of options" value="${$index}">${choice}</option>)
</select>
<label>String</label>
<br><br>
<button click.delegate="changeValues()">Change values to three</button>
</template>
export class App {
options = [ 'one', 'two', 'three' ];
_optionId = 1;
get optionId(){
return this._optionId;
}
set optionId(newValue){
console.log( "option="+newValue+", type is " + typeof(newValue) );
this._optionId = parseInt(newValue);
}
_optionId2 = "1";
get optionId2(){
return this._optionId2;
}
set optionId2(newValue){
console.log( "option2="+newValue+", type is " + typeof(newValue) );
this._optionId2 = newValue;
}
changeValues(){
this.optionId = 2;
this.optionId2 = "2";
}
}
<!doctype html>
<html>
<head>
<title>Different behaviour with number and string getter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment