Last active
April 21, 2016 18:30
-
-
Save Vaccano/8c16d89bce2fb81f97ce to your computer and use it in GitHub Desktop.
Aurelia Gist - Bind causes bindable callback failure
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> | |
| <require from="./boxes-vm"></require> | |
| <h1>${message}</h1> | |
| <form role="form"> | |
| <boxes boxes.bind="shipment.boxes"></boxes> | |
| </form> | |
| <button click.delegate="clearBoxes()">Clear All</button> | |
| </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
| export class App { | |
| constructor() { | |
| this.shipment.boxes = this.boxes; | |
| } | |
| message = 'Hello World!'; | |
| shipment = {}; | |
| boxes=[]; | |
| clearBoxes(){ | |
| try { | |
| this.boxes = []; | |
| } catch(e){ | |
| // Since the error happens as a result of the micro task queue | |
| // this will never be hit. | |
| alert(e); | |
| } | |
| } | |
| } |
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> | |
| <div class="row vertical-align"> | |
| <!--Box Number--> | |
| <div class="col-md-2 to-validate"> | |
| <input type="text" class="form-control" placeholder="Enter Box Number" value.bind="box.boxNumber" style="width: 100%"> | |
| </div> | |
| <!--Infectious?--> | |
| <div class="col-md-1"> | |
| <input id="isInfectious" type="checkbox" checked.bind="box.isInfectiousExpected"> | |
| </div> | |
| <!--Dry Ice?--> | |
| <div class="col-md-2"> | |
| <input id="hasDryIce" type="checkbox" checked.bind="box.isDryIceExpected"> | |
| </div> | |
| <div class="col-md-2"> | |
| <button click.delegate="deleteBox()">delete</button> | |
| </div> | |
| </div> | |
| </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 {bindable, bindingMode} from 'aurelia-framework'; | |
| import {autoinject, customElement} from 'aurelia-framework'; | |
| //import {Box} from "./box" | |
| @customElement('box') | |
| export class BoxVm { | |
| @bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'boxChanged' }) box; | |
| @bindable boxIndex; | |
| boxChanged() { | |
| alert('Box Button Pressed') | |
| } | |
| boxDelete; | |
| deleteBox(){ | |
| if (this.boxDelete == 'function'){ | |
| console.log('deleting box') | |
| this.boxDelete(this); | |
| } | |
| } | |
| } |
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
| export class Box{ | |
| isInfectiousExpected = false; | |
| isDryIceExpected = false; | |
| boxNumber = ''; | |
| } |
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> | |
| <require from="./box-vm"></require> | |
| <div class="container-fluid"> | |
| <div class="row row-header"> | |
| <div class="col-md-2">Box Number</div> | |
| <div class="col-md-1">Infectious?</div> | |
| <div class="col-md-2">Dry Ice?</div> | |
| </div> | |
| </div> | |
| <div class="container-fluid" style="overflow-y: auto; overflow-x: hidden; border: 1px solid black; flex-grow: 1; height: 100%"> | |
| <div repeat.for="box of boxes"> | |
| <box box.bind="box" box-index="${$index}" ></box> | |
| </div> | |
| </div> | |
| <button disabled click.delegate="addBox()">Add Box</button> | |
| </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 {bindable, bindingMode} from 'aurelia-framework'; | |
| import {inject, customElement, TaskQueue} from 'aurelia-framework'; | |
| @customElement('boxes') | |
| @inject(TaskQueue) | |
| export class BoxItems { | |
| constructor(taskQueue) { | |
| this.taskQueue = taskQueue; | |
| } | |
| @bindable({ defaultBindingMode: bindingMode.twoWay }) boxes; | |
| taskQueue; | |
| addBox() { | |
| var boxSequence = Math.floor(Math.random()*(99999-10001+1)+10001); | |
| var newBox = {boxNumber: '7-' + boxSequence, isDryIceExpected: true, isInfectiousExpected: false}; | |
| this.boxes.push(newBox); | |
| } | |
| deleteBox(box) { | |
| var index = this.boxes.indexOf(box); | |
| if (index > -1) | |
| this.boxes.splice(index, 1); | |
| } | |
| } |
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </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 src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
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 {Aurelia} from 'aurelia-framework' | |
| import {ViewLocator} from 'aurelia-framework'; | |
| export function configure(aurelia: Aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging(); | |
| // Setup view -> viewModel relationship to support value-view.htm and value-vm.ts | |
| ViewLocator.prototype.convertOriginToViewUrl = (origin) => { | |
| let moduleId = origin.moduleId; | |
| console.log(origin); | |
| // remove the file extension | |
| moduleId = moduleId.substring(0, moduleId.lastIndexOf('.')); | |
| // see if the module ends in 'Vm' | |
| if (moduleId.endsWith('-vm')) { | |
| var coreName = moduleId.substring(0, moduleId.length - 3); | |
| console.log(coreName + '-view.html') | |
| return coreName + '-view.html'; | |
| } | |
| else { | |
| return moduleId + '.html'; | |
| } | |
| }; | |
| window.onerror = function(msg, url, lineNo) {alert(msg)}; | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment