Skip to content

Instantly share code, notes, and snippets.

@atsu85
Last active October 9, 2016 10:23
Show Gist options
  • Save atsu85/c59eed72e1c255b8f462c1d45e495a7a to your computer and use it in GitHub Desktop.
Save atsu85/c59eed72e1c255b8f462c1d45e495a7a to your computer and use it in GitHub Desktop.
Aurelia Enhance Bug
<template>
<require from="./relation-field.html"></require>
<h1>${message}</h1>
<!-- Fails on consecutive enhance -->
<compose repeat.for="relation of data.relations" view="./relation-field.html" view-model.bind="relation"></compose>
<!--Will fail as well-->
<!--<relation-field repeat.for="relation of data.relations" relation.bind="relation"></relation-field>-->
</template>
export class EnhanceBugCustomElement {
aurelia;
message = 'Aurelia Enhance Bug';
data = {
relations: [
{
uri: "uri 1",
label: "label 1"
},
{
uri: "uri 2",
label: "label 2"
}
]
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<enhance-bug id="enhanceElem"></enhance-bug>
<button id="enhance">click to enhance(), will work (not enhanced)</button>
<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', 'aurelia-templating'],function(bootstrapper, aureliaTemplating) {
bootstrapper.bootstrap(function(aurelia) {
aurelia.use
.defaultBindingLanguage()
.defaultResources()
.developmentLogging()
.globalResources('enhance-bug')
aurelia.start().then(function() {
//aurelia.enhance();
});
var clicks = 0;
document.getElementById("enhance").addEventListener("click", function() {
clicks++;
if(clicks%2 == 1)
this.innerHTML = "click to enhance(), will fail";
else
this.innerHTML = "click to enhance(), will work";
//aurelia.enhance();
var templatingEngine = aurelia.container.get(aureliaTemplating.TemplatingEngine);
console.info("calling templatingEngine.enhance()", templatingEngine.enhance);
templatingEngine.enhance(document.getElementById("enhanceElem"));
console.info("templatingEngine.enhance succeeded");
})
});
});
</script>
</body>
</html>
<template bindable="relation">
<div class="element_of_predicate">
<a href="${relation.uri}">${relation.label}</a>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment