Skip to content

Instantly share code, notes, and snippets.

@niieani
Created June 1, 2016 22:20
Show Gist options
  • Save niieani/1ee4d2599a324534b75e22e95512981a to your computer and use it in GitHub Desktop.
Save niieani/1ee4d2599a324534b75e22e95512981a to your computer and use it in GitHub Desktop.
Aurelia RequireJS Gist
<template>
<!-- Simple usage: -->
<h1>message: ${async(message).value}</h1>
<!-- With a placeholder: -->
<h1>message: ${async(message).value ? async(message).value : '...'}</h1>
</template>
import {asyncBindings} from './enhance-promise';
import {computedFrom} from 'aurelia-framework';
@asyncBindings
export default class App {
@oneWay wtf;
message = new Promise((resolve) => setTimeout(() => resolve('Hello World!'), 2000));
constructor() {
console.log('wtf', this.wtf)
}
}
// function cycle(definition, propertyName, descriptor) {
// console.log(arguments)
// }
function oneWay(definition, propertyName, descriptor) {
let val = 'ahahah';
return {
set: function (value) {
val = value;
console.log('set', value);
},
get: function() {
console.log(this)
return val;
// console.log('get', val);
},
enumerable: true,
configurable: true
};
// console.log(computedFrom('lala'))
// console.log(arguments);
// descriptor.get = function() {
// return 'haha'
// }
}
function enhancePromiseForAureliaBinding(promise) {
if (!promise || typeof promise.then != 'function') return;
if (promise.hasOwnProperty('value')) return promise;
const observableGetter = function() {
return; // this is the default value of the unresolved promise
}
observableGetter.getObserver = function(promise) {
return {
subscribe: function(context, binding) {
promise.then(value => binding.updateTarget(value));
}
}
}
Object.defineProperty(promise, 'value', {
get: observableGetter,
enumerable: true,
configurable: true
})
return promise;
}
export function asyncBindings(definition) {
console.log(arguments)
if (definition) {
definition.prototype.async = enhancePromiseForAureliaBinding;
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment