KO template

by Jorge Bustos Pereda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<h5>Shorthand</h5>
<div id="shorthand">
  <div data-bind="template: 'person'" class="a"></div>
</div>

<h5>Explicit</h5>
<div id="explicit">
    <div data-bind="template: {name: 'person', data: john}" class="a"></div>
    <div data-bind="template: {name: 'animal', data: krispin}" class="a"></div>
</div>

<h5>Explicit 2</h5>
<div id="explicit2">
    <div data-bind="foreach: items">
        <div data-bind="template: $data" class="a"></div>
    </div>
</div>
   

<script type="text/HTML" id="person">
    Name: <span data-bind="text:name"></span><br/>
    Identity number: <span data-bind="text:age"></span>
</script>

<script type="text/HTML" id="animal">
    Name: <span data-bind="text:name"></span><br/>
    Breed: <span data-bind="text:breed"></span>
</script>

CSS

.a {
    border: solid 1px silver;
    padding: 10px;
    margin-bottom: 15px;
}

h5 {
    font-size: 15px;
    font-weight: bold;
    margin: 10px 0 0 0;
}

JavaScript

var john = {	
        name:'John', 
        age: 21 
	};
ko.applyBindings(john, shorthand);

var krispin = {
    name: 'Krispin',
    breed: 'Akita Inu'
};

var vmExplicit = {
    john: john,
    krispin: krispin
};
ko.applyBindings(vmExplicit, explicit);

var vmExplicit2 = { 
    items: [	
        { name: 'person', data: john},
    	{ name: 'animal', data: krispin}],
};
ko.applyBindings(vmExplicit2, explicit2);