Skip to content

Instantly share code, notes, and snippets.

@freshcutdevelopment

freshcutdevelopment/app.html

Last active September 29, 2017 02: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/3027eaf9ab9e365b31506742b01b43fc to your computer and use it in GitHub Desktop.
Save freshcutdevelopment/3027eaf9ab9e365b31506742b01b43fc to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist - Disabled binding
Raw
app.html
<template>
<require from="style.css"></require>
<section>
<h1>${message}</h1>
<hr/>
<div class="form-inline">
<div class="input-group input-group mb-2 mr-sm-2 mb-sm-0">
<input class="form-control mb-2 mr-sm-2 mb-sm-0"
value.bind="title"
blur.trigger="refreshSignal()">
</input>
<button class="btn btn-primary" disabled.bind="addDisabled() & signal:'can-add-signal'">
to enable
</button>
</div>
</div>
</section>
</template>
Raw
app.js
import {inject, bindable, computedFrom} from 'aurelia-framework';
import {BindingSignaler} from 'aurelia-templating-resources';
@inject(BindingSignaler)
export class App {
constructor(bindingSignaler){
this.message = 'Signal binding behavior';
this.bindingSignaler = bindingSignaler;
this.title = "";
this.bindingSignaler.signal('can-add-signal');
}
bind(){
this.refreshSignal();
}
addDisabled(){
return this.title.length === 0;
}
refreshSignal(){
this.bindingSignaler.signal('can-add-signal');
}
}
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
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