chap2 -> Creating templates -> The catalog template -> part 1

Adding catalog template in simplest way
chap2
Jason Zhu 2022-04-19 22:39:27 +10:00
parent 4b8c3312f0
commit 3001e6f436
1 changed files with 40 additions and 1 deletions

View File

@ -44,7 +44,46 @@
</button> </button>
<hr /> <hr />
</script> </script>
<script type="text/html" id="catalog"></script> <script type="text/html" id="catalog">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i> Search
</span>
<input type="text" class="form-control" data-bind="textInput:searchTerm">
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach:catalog">
<tr data-bind="style:{color:stock() < 5 ? 'red' : 'black'}">
<td data-bind="text:name"></td>
<td data-bind="text:price"></td>
<td data-bind="text:stock"></td>
<td>
<button class="btn btn-primary" data-bind="click:$parent.addToCart">
<i class="glyphicon glyphicon-plus-sign"></i> Add
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<strong>Items:</strong><span data-bind="text:catalog().length"></span>
</td>
<td colspan="1">
<span data-bind="template:{name: 'cart-widget'}"></span>
</td>
</tr>
</tfoot>
</table>
</script>
<script type="text/html" id="add-to-catalog-modal"></script> <script type="text/html" id="add-to-catalog-modal"></script>
<script type="text/html" id="cart-widget"></script> <script type="text/html" id="cart-widget"></script>
<script type="text/html" id="cart-item"></script> <script type="text/html" id="cart-item"></script>