jQuery Template tmpl & if

by HYEONGJINKIM

HTML

<script src='http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js'></script>
<div id="pageContainer">
     <h1>Products</h1>

    <div id="productListContainer"></div>
    <!-- Show list of products using composition -->
    <script id="productListTemplate" type="text/x-jQuery-tmpl">
            {{if onSale}}
                {{tmpl "#productOnSaleTemplate"}}
            {{else}}
                {{tmpl "#productTemplate"}}
            {{/if}}
    </script>
    <!-- Show product -->
    <script id="productTemplate" type="text/x-jQuery-tmpl">
        ${name} is not on sale.<br/>
    </script>
    <!-- Show product on sale -->
    <script id="productOnSaleTemplate" type="text/x-jQuery-tmpl">
      <b>${name}</b> is on sale!<br/>
    </script>
</div>

JavaScript

var products = [{
    name: "Laptop",
    onSale: false
}, {
    name: "Apples",
    onSale: true
}, {
    name: "Comb",
    onSale: false
}];
$(document).ready(function () {


    $("#productListTemplate").tmpl(products).appendTo("#productListContainer");
});