Skip to content

Instantly share code, notes, and snippets.

@bigopon
Forked from Spaceman1861/app.html
Last active October 24, 2018 11:53
Show Gist options
  • Select an option

  • Save bigopon/d31fd5ddb639af5a6c48876b593be0b9 to your computer and use it in GitHub Desktop.

Select an option

Save bigopon/d31fd5ddb639af5a6c48876b593be0b9 to your computer and use it in GitHub Desktop.
Aurelia Gist
<template>
<require from="./sub-widget"></require>
<div repeat.for="log of logs">
<div>${log}</div>
</div>
<sub-widget></sub-widget>
</template>
import { BaseViewModel } from "base-view-model";
export class Dashboard extends BaseViewModel {
name = "Dashboard";
}
import { inject, CompositionEngine, CompositionTransaction, CompositionTransactionNotifier } from "aurelia-framework";
// The gist doesn't seem to have latest version
// So the following block is for updating, just in case we need to test with latest behavior
// that is related to composition engine / composition transaction
// CompositionEngine.prototype.
// _createControllerAndSwap = function(context) {
// return this.createController(context).then(controller => {
// if (context.compositionTransactionOwnershipToken) {
// return context.compositionTransactionOwnershipToken
// .waitForCompositionComplete()
// .then(() => {
// controller.automate(context.overrideContext, context.owningView);
// return this._swap(context, controller.view);
// })
// .then(() => controller);
// }
// controller.automate(context.overrideContext, context.owningView);
// return this._swap(context, controller.view).then(() => controller);
// });
// }
@inject(CompositionTransaction)
export class BaseViewModel {
compositionTransactionNotifier: CompositionTransactionNotifier;
compositionTransaction: CompositionTransaction;
logs = [];
name = "BaseWidget";
timeToWaitBetweenStates: number = 50;
constructor(
compositionTransaction: CompositionTransaction
) {
this.compositionTransaction = compositionTransaction;
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Constructor called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Constructor done");
},
this.timeToWaitBetweenStates
);
}
bind() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Bind called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Bind done");
},
this.timeToWaitBetweenStates
);
}
attached() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Attached called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Attached done");
},
this.timeToWaitBetweenStates
);
}
detached() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Detached called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Detached done");
},
this.timeToWaitBetweenStates
);
}
unbind() {
this.compositionTransactionNotifier = this.compositionTransaction.enlist();
this.log("Unbind called");
setTimeout(() => {
this.compositionTransactionNotifier.done();
this.log("Unbind done");
},
this.timeToWaitBetweenStates
);
}
log(text) {
text = `${this.name} : ${text}`;
console.log(
text,
this,
this.compositionTransaction["_compositionCount"]
);
this.logs.push(text);
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<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>
<template>
<require from="./super-sub-widget"></require>
<div repeat.for="log of logs">
<div>${log}</div>
</div>
<super-sub-widget></super-sub-widget>
</template>
import { BaseViewModel } from "base-view-model";
export class SubWidgetCustomElement extends BaseViewModel {
name = "SubWidget";
}
<template>
<div repeat.for="log of logs">
<div>${log}</div>
</div>
</template>
import { BaseViewModel } from "base-view-model";
export class SuperSubWidgetCustomElement extends BaseViewModel {
name = "SuperSubWidget";
bind() {
super.bind();
debugger;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment