Skip to content

Instantly share code, notes, and snippets.

@freshcutdevelopment

freshcutdevelopment/app.html

Last active October 29, 2017 08:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save freshcutdevelopment/b23963d6d34ba33f52d605c05196c9e0 to your computer and use it in GitHub Desktop.
Save freshcutdevelopment/b23963d6d34ba33f52d605c05196c9e0 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist - Custom binding behaviors
Raw
app.html
<template>
<require from="./inspect-binding-behavior"></require>
<require from="./style.css"></require>
<section>
<h1>${message & inspect}</h1>
<hr/>
<input value.bind="message & inspect"></input>
<input type="checkbox" checked.bind="checked & inspect"
value.one-way="isChecked & inspect">
<hr/>
<h2>Bindings</h2>
<table class="table table-striped table-bordered">
<tr>
<th>Type</th>
<th>Source</th>
<th>Target</th>
<th>Mode</th>
</tr>
<tr repeat.for="binding of bindings">
<td>${binding.type}</td>
<td>${binding.source}</td>
<td>${binding.target}</td>
<td>${binding.mode == 1 ? "one-way" : "two-way" }</td>
</tr>
</table>
</section>
</template>
Raw
app.js
export class App {
constructor(){
this.message = 'Custom binding behavior';
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/config.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
inspect-binding-behavior.js
export class InspectBindingBehavior {
bind(binding, scope) {
let name = binding.targetObserver ? binding.targetObserver.constructor.name : binding.constructor.name;
let currentBindings = scope.overrideContext["bindings"] || [];
currentBindings.push({
"type" : name,
"source" : binding.targetProperty,
"target": binding.target.nodeName,
"mode" : binding.mode
});
scope.overrideContext["bindings"] = currentBindings
}
unbind(binding, scope) {
delete scope.bindingContext["bindings"];
}
}
Raw
main.js
export function configure(aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
Raw
style.css
section{
margin-left:20px;
margin-right:20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment