Skip to content

Instantly share code, notes, and snippets.

@MarkHerhold

MarkHerhold/app.html

Forked from AshleyGrant/app.html
Last active April 24, 2016 21:21
Show Gist options
  • Save MarkHerhold/76964f8cde70b3c6e9f076557b027c32 to your computer and use it in GitHub Desktop.
Save MarkHerhold/76964f8cde70b3c6e9f076557b027c32 to your computer and use it in GitHub Desktop.
Download ZIP
two-way binding update issues
Raw
app.html
<template>
<require from="nav-bar.html"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
Raw
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' },
{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' }
]);
this.router = router;
}
}
Raw
filter-element.html
<template>
<div style="background-color: lightgray">
<h1>Filer Element-scoped</h1>
<h2>Selected Items</h2>
<p>Number: ${selectedStuff.length}</p>
<div class="btn-group" role="group">
<button type="button" click.delegate="select('A')" class="btn btn-default">A</button>
<button type="button" click.delegate="select('B')" class="btn btn-default">B</button>
<button type="button" click.delegate="select('C')" class="btn btn-default">C</button>
</div>
<h2>Unselected Items</h2>
<p>Number: ${unselectedStuff.length}</p>
</div>
</template>
Raw
filter-element.js
import { bindable } from 'aurelia-framework';
export class FilterElement {
@bindable selectedStuff;
@bindable unselectedStuff;
constructor() {
console.log('new filter element')
}
attached() {
setTimeout(() => {
this.unselectedStuff = ['A', 'B', 'C'];
}, 100)
}
select(item) {
this.selectedStuff.push(item);
const index = this.unselectedStuff.findIndex((d) => d === item);
if (index >= 0) {
this.unselectedStuff.splice(index, 1);
}
}
selectedStuffChanged(newStuff, oldStuff) {
console.log('FilterElement -> selectedStuffChanged', newStuff, oldStuff)
}
unselectedStuffChanged(newStuff, oldStuff) {
console.log('FilterElement -> unselectedStuffChanged', newStuff, oldStuff)
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<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>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
import 'bootstrap';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
//Uncomment the line below to enable animation.
//aurelia.use.plugin('aurelia-animator-css');
//if the css animator is enabled, add swap-order="after" to all router-view elements
//Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
//aurelia.use.plugin('aurelia-html-import-template-loader')
aurelia.start().then(() => aurelia.setRoot());
}
Raw
nav-bar.html
<template bindable="router">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-home"></i>
<span>${router.title}</span>
</a>
</div>
<div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="loader" if.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul>
</div>
</nav>
</template>
Raw
welcome.html
<template>
<require from="./filter-element"></require>
<section class="au-animate">
<h2>${heading}</h2>
<filter-element selected-stuff.two-way="selectedStuff" unselected-stuff.two-way="unselectedStuff"></filter-element>
<h1>Welcome-scoped</h1>
<h2>Selected Items</h2>
<p>Number: ${selectedStuff.length}</p>
<h2>Unselected Items</h2>
<p>Number: ${unselectedStuff.length}</p>
</section>
</template>
Raw
welcome.js
import { bindable } from 'aurelia-framework';
export class Welcome {
heading = 'Multiple twp-way binding issues demo';
@bindable selectedStuff = [];
@bindable unselectedStuff = [];
selectedStuffChanged(newStuff, oldStuff) {
console.log('Welcome -> selectedStuffChanged', newStuff, oldStuff);
}
unselectedStuffChanged(newStuff, oldStuff) {
console.log('Welcome -> unselectedStuffChanged', newStuff, oldStuff);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment