Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Knockout.js Custom Elements
<!DOCTYPE html>
<meta charset="utf-8">
<ul>
<li><a href=".">custom element</a></li>
<li><b>component binding</b></li>
<li><a href="template-binding.html">template binding</a></li>
</ul>
<hr />
<div data-bind="component: 'custom-element'">custom element loading...</div>
<script src="//rawgit.com/knockout/knockout/v3.3.0/dist/knockout.debug.js"></script>
<script src="main.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<ul>
<li><b>custom element</b></li>
<li><a href="component-binding.html">component binding</a></li>
<li><a href="template-binding.html">template binding</a></li>
</ul>
<hr />
<custom-element>custom element loading...</custom-element>
<script src="//rawgit.com/knockout/knockout/v3.3.0/dist/knockout.debug.js"></script>
<script src="main.js"></script>
ko.components.register('custom-element', {
template: '<b>Custom Element Loaded!</b>'
});
ko.applyBindings();
<!DOCTYPE html>
<meta charset="utf-8">
<ul>
<li><a href=".">custom element</a></li>
<li><a href="component-binding.html">component binding</a></li>
<li><b>template binding</b></li>
</ul>
<hr />
<div data-bind="template: 'custom-element'"></div>
<script id="custom-element" type="text/html">
<custom-element>custom element loading...</custom-element>
</script>
<script src="//rawgit.com/knockout/knockout/v3.3.0/dist/knockout.debug.js"></script>
<script src="main.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment