-
-
Save ahmedomarjee/b0f1b3aef52f373dbe7d12341f29c5cd to your computer and use it in GitHub Desktop.
Aurelia signal binding behavior
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="container"> | |
| <h2>Posts</h2> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Title</th> | |
| <th>Publication Date</th> | |
| <th>When</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr repeat.for="post of posts"> | |
| <td><b>${post.title}</b></td> | |
| <td>${post.published}</td> | |
| <td><i>${post.published | timeAgo & signal:'ticker'}</i></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="well">Notice that the first 2 posts <b>'When'</b> times will be refreshed every 5 seconds. And a difference should refelect after a few minutes have elapsed.</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 {inject} from 'aurelia-dependency-injection'; | |
| import {BindingSignaler} from 'aurelia-templating-resources'; | |
| @inject(BindingSignaler) | |
| export class App { | |
| posts = [ | |
| {'title':'A tall tale, a few seconds ago', 'published': moment()}, | |
| {'title':'A tall tale, a few minutes ago', 'published': moment().subtract(1, 'minutes')}, | |
| {'title':'A tall tale, an hour ago', 'published': moment().subtract(1, 'hour')}, | |
| {'title':'A tall tale, a day ago', 'published': moment().subtract(1, 'day')}, | |
| {'title':'A tall tale, a month ago', 'published': moment().subtract(1, 'month')}, | |
| {'title':'A tall tale, a year ago', 'published': moment().subtract(1, 'year')}, | |
| {'title':'A tall tale, 5 years ago', 'published': moment().subtract(5, 'years')} | |
| ]; | |
| constructor(signaler) { | |
| setInterval(() => signaler.signal('ticker'), 5000); | |
| } | |
| } | |
| export class TimeAgoValueConverter { | |
| toView(value) { | |
| return moment.duration(-1 * moment().diff(value)).humanize(true); | |
| } | |
| } |
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> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| .mouse-move-demo { | |
| width: 100%; | |
| height: 80px; | |
| border: 1px dotted; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body aurelia-app> | |
| <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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment