Skip to content

Instantly share code, notes, and snippets.

@kaleb

kaleb/component-binding.html

Last active August 29, 2015 14:16
Show Gist options
  • Save kaleb/632e77875ae7171033b5 to your computer and use it in GitHub Desktop.
Save kaleb/632e77875ae7171033b5 to your computer and use it in GitHub Desktop.
Download ZIP
Knockout.js Custom Elements
Raw
component-binding.html
<!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>
Raw
index.html
<!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>
Raw
main.js
ko.components.register('custom-element', {
template: '<b>Custom Element Loaded!</b>'
});
ko.applyBindings();
Raw
template-binding.html
<!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