Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Example Knockout parameterized template
<!DOCTYPE html>
<meta charset="utf-8">
<title>ko: parameterized template</title>
<style type="text/css">
li.inline {
display: inline-block;
margin: 0 .5em;
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/jquery.tmpl.js"></script>
<script src="lib/knockout-2.1.0.js"></script>
<div data-bind="template: {
name: 'items',
data: colors,
templateOptions: {
title: 'List of colors',
liClass: 'inline'
<script type="text/html" id="items">
{{each $data}}
<li class="${$item.liClass}" data-bind="template: {
name: 'button',
data: $data[$index]
<script type="text/html" id="button">
<button data-bind="
click: toggleState,
text: name + ' ' + isActive(),
style: { color: isActive ? 'red' : 'black' }"></button>
var vm = {
colors: ko.observableArray([
new Color('red'),
new Color('green'),
new Color('blue'),
new Color('yellow'),
new Color('cyan'),
new Color('magenta')
function Color (name, state) { = name;
this.isActive = ko.observable(!!state);
return this;
Color.prototype.toggleState = function () {
this.isActive = !this.isActive;
console.log(, this.isActive)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.