Knockout templateOptions

http://www.knockmeout.net/2011/03/quick-tip-reusing-template-by-passing.html

by rniemeyer

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<h2>My Menu</h2>
<hr />
<div data-bind="template: { name: 'items', data: breakfast, templateOptions: { header: 'Breakfast Items', message: 'Wake up to these delicious items!', class: 'breakfast' } }"></div>
<div data-bind="template: { name: 'items', data: lunch, templateOptions: { header: 'Lunch Dishes', message: 'Stop by for a quick lunch!', class: 'lunch' } }"></div>
<div data-bind="template: { name: 'items', data: dinner, templateOptions: { header: 'Dinner Entrees', message: 'Enjoy our tasty dinner selections!', class: 'dinner' } }"></div>

<script id="items" type="text/html">
    <h3>${$item.header}</h3>
    <div class="${$item.class}">
        {{each $data}}
        <p>
            <span class="name">${name}</span>
            <span class="price">${price}</span>
        </p>
        {{/each}}
    </div>
    <p><em>${$item.message}</em></p>
    <hr />
</script>

CSS

h2 { font-size: 1.5em; font-weight: bold }
h3 { font-size: 1.25em; font-weight: bold; }
em { font-size: .75em; font-style: italic }
.breakfast { background-color: #F3F781; }
.lunch { background-color: #81F7F3; }
.dinner{ background-color: #F5A9F2; }

JavaScript

var viewModel = {
    breakfast: [
        {name: "toast", price: 2.50},
        {name: "pancakes", price: 4.00},
        {name: "eggs", price: 3.25}],
    lunch: [
        {name: "grilled cheese", price: 4.00},
        {name: "hot dog", price: 3.50},
        {name: "pizza", price: 6.00}],
    dinner: [
        {name: "steak", price: 15.75},
        {name: "fish", price: 11.00},
        {name: "salad", price: 8.25}
    ],
};

ko.applyBindings(viewModel);