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.

comments powered by Disqus

Featured

  • Customize Your Own Audio Test Cues in Visual Studio 2019 v16.9 Preview 3

    Yes, developers can be alerted to a failed test with a fart sound.

  • Progress Touts New Third-Party Blazor UI Components

    Third-party dev tool specialist Progress announced an update to its .NET-centric offerings, touting new controls for Blazor, Microsoft's red-hot project for creating web apps with C#.

  • Entity Framework Core 6: What Developers Want

    Microsoft outlined its plan for Entity Framework Core 6, which in November will take its place as the data access component of the landmark .NET 6, a long-term support (LTS) release that will mark Microsoft's transition from the Windows-only .NET Framework to an open source, cross-platform umbrella offering of all things .NET.

  • AWS Open Sources .NET Porting Assistant GUI

    After previously open sourcing components of its Porting Assistant for .NET, Amazon Web Services open sourced the tool's GUI.

Upcoming Events