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.