Last active
November 1, 2019 19:46
-
-
Save YardGnomeNinja/f5babc7b39c226bcdc1bd36a41b6ef33 to your computer and use it in GitHub Desktop.
Aurelia - Templating Engine Enhance Example 2
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(0)">Add Item to Group 0</button> | |
<div id="container0" data-container-group="containerGroup0"></div> | |
<div id="container1" data-container-group="containerGroup0"></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 superflous 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 = [[0,1,2],[1,2,3]]; | |
constructor(enhancer) { | |
this.enhancer = enhancer; | |
} | |
attached() { | |
// Get the "parent" element containing the content you wish to "enhance" | |
var enhanceMyContentElement = document.getElementById('container0'); | |
// Add some new content to the element | |
enhanceMyContentElement.innerHTML = '<div repeat.for="item of items[0]">${item}</div>'; | |
// Do the work | |
this.enhancer.enhance(this, enhanceMyContentElement); | |
} | |
// Show off that it works! | |
addItem(container) { | |
this.items[container].push(this.items[container].length); | |
} | |
} |
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