Last active
January 23, 2018 21:32
-
-
Save SaucyJack/067fb60cc93650dd0c4b322b4f66836f to your computer and use it in GitHub Desktop.
Aurelia computedFrom
This file contains 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> | |
| <h1>It's computedFrom!</h1> | |
| <select value.bind="selectedRoute" change.delegate="routeChanged()"> | |
| <option repeat.for="x of router.navigation" value.bind="x.config.name" model.bind="x.config.name"> | |
| ${x.title} | |
| </option> | |
| </select> | |
| <router-view></router-view> | |
| </template> |
This file contains 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 { Router, RouterConfiguration } from 'aurelia-router'; | |
| export class App { | |
| router; | |
| selectedRoute; | |
| configureRouter(config, router) { | |
| config.title = 'Aurelia computedFrom'; | |
| this.router = router; | |
| config.map([ | |
| { route: ['', 'home'], name: 'home', moduleId: './home', nav: true, title: 'Simple' }, | |
| { route: 'collection', name: 'collection', moduleId: './collection', nav: true, title: 'Collection' } | |
| ]); | |
| } | |
| routeChanged() { | |
| console.log('routeChanged: ' + this.selectedRoute); | |
| this.router.navigateToRoute(this.selectedRoute); | |
| } | |
| } |
This file contains 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> | |
| <h3>Array of objects with integer properties</h3> | |
| </template> |
This file contains 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'; | |
| import {SingleItem} from './single-item'; | |
| export class Collection { | |
| data = [ | |
| ]; | |
| calculateSum(singleItem) { | |
| return parseFloat(singleItem.firstThing) + parseFloat(singleItem.secondThing); | |
| } | |
| } |
This file contains 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> | |
| <h3>Basic, non-collection, properties in VM</h3> | |
| <input type="text" value.bind="firstValue" > <strong>+</strong> | |
| <br> | |
| <input type="text" value.bind="secondValue" > <strong>=</strong> | |
| <br> | |
| <input type="text" value.bind="sum" disabled > | |
| </template> |
This file contains 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'; | |
| export class Home { | |
| firstValue = 0; | |
| secondValue = 0; | |
| @computedFrom('firstValue', 'secondValue') | |
| get sum() { | |
| return parseInt(this.firstValue) + parseInt(this.secondValue); | |
| } | |
| } |
This file contains 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
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia computedFrom</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <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> |
This file contains 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
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging(); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
This file contains 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'; | |
| export class SingleItem { | |
| id; | |
| firstThing; | |
| secondThing; | |
| _val; | |
| parent; | |
| constructor(id, firstThing, secondThing, val, parent) { | |
| this.id = id; | |
| this.firstThing = firstThing; | |
| this.secondThing = secondThing; | |
| this._val = val; | |
| this.parent = parent; | |
| } | |
| @computedFrom('_val') | |
| get val() { | |
| return this._val; | |
| } | |
| set val(newValue) { | |
| this._val = newValue; | |
| this.parent.calculateSum(this); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment