Code Reuse with External Templates and Knockout.js: Listing 1.
The product-details template contained within a script tag.
<script id="productDetails" type="text/html">
<div data-bind="with: selectedProduct">
<div class="photoContainer leftFloat">
<img src="/images/guitar.jpg"
data-bind="attr: {alt: shortDesc}"
class="photoThumbnail"></img>
</div>
<div>
<span>Brand: </span>
<span data-bind="text: model().brand"
class="textValues"></span>
</div>
<div>
<span>Model: </span>
<span data-bind="text: model().name"
class="textValues"></span>
</div>
<div>
<span>Price: </span>
<span data-bind=
"text: my.formatCurrency(salePrice())"
class="textValues"></span>
</div>
<div>
<span>Description:</span></div>
<div>
<span data-bind="text: description"
class="textValues"></span>
</div>
</div>
</script>
About the Author
John Papa is a Microsoft Regional Director and former Microsoft technical evangelist. Author of 100-plus articles and 10 books, he specializes in professional application development with Windows, HTML5, JavaScript, CSS, Silverlight, Windows Presentation Foundation, C#, .NET and SQL Server. Check out his online training with Pluralsight; find him at johnpapa.net and on Twitter at twitter.com/john_papa.