chap02 -> Creating templates -> The add-to-cart-modal template

This commit is contained in:
Jason Zhu 2022-04-20 19:25:18 +10:00
parent e52b7bb978
commit b299143ee2

View File

@ -84,7 +84,49 @@
</tfoot>
</table>
</script>
<script type="text/html" id="add-to-catalog-modal"></script>
<script type="text/html" id="add-to-catalog-modal">
<div class="modal fade" id="addToCatalogModal">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" data-bind="with:newProduct">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3>Add New Product to the Catalog</h3>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Price" data-bind="textInput:price">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="Stock" data-bind="textInput:stock">
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default" data-bind="{click:$parent.addProduct}">
<i class="glyphicon glyphicon-plus-sign"></i> Add Product
</button>
</div>
</div>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-diaglog -->
</div> <!-- /.modal -->
</script>
<script type="text/html" id="cart-widget"></script>
<script type="text/html" id="cart-item"></script>
<script type="text/html" id="cart"></script>