Created
May 21, 2020 12:48
-
-
Save YardGnomeNinja/b1dc3fab816befdd172f0c8a715bd4fb to your computer and use it in GitHub Desktop.
Aurelia - Templating Engine Enhance Example
This file contains 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> | |
<button click.delegate="addItem()">Add Item</button> | |
<div id="enhanceMyContent"></div> | |
</template> |
This file contains 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
// Note: The "Enhancer" class being used is wholly superfluous to the example. | |
// Its contents can simply be included in this class. It just happens to mimic my current use case. | |
import {inject} from 'aurelia-framework'; | |
import {Enhancer} from './enhancer'; | |
@inject(Enhancer) | |
export class App { | |
items = [1, 2, 3]; | |
constructor(enhancer) { | |
this.enhancer = enhancer; | |
} | |
attached() { | |
// Get the "parent" element containing the content you wish to "enhance" | |
var enhanceMyContentElement = document.getElementById('enhanceMyContent'); | |
// Add some new content to the element | |
enhanceMyContentElement.innerHTML = '<div repeat.for="item of items">${item}</div>'; | |
// Do the work | |
this.enhancer.enhance(this, enhanceMyContentElement); | |
} | |
// Show off that it works! | |
addItem() { | |
this.items.push(this.items.length + 1); | |
} | |
} |
This file contains 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-framework'; | |
import {TemplatingEngine} from 'aurelia-templating'; | |
@inject(TemplatingEngine) | |
export class Enhancer { | |
constructor(templatingEngine) { | |
this.templatingEngine = templatingEngine; | |
} | |
// https://www.youtube.com/watch?v=KiqkclCJsZs | |
enhance(context, enhancingElement) { | |
// Tell the templating engine just the basics for now. | |
// The element whose content will be enhanced | |
// and the context the enhanced elements will be associated with. | |
this.templatingEngine.enhance({ | |
element: enhancingElement, | |
bindingContext: context | |
}); | |
} | |
} |
This file contains 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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> | |
<style> | |
body { | |
padding: 20px; | |
} | |
.form-component { | |
display: block; | |
margin-bottom: 20px; | |
} | |
</style> | |
</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