Jason
/
safaribook-knockout-essentials
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chap2. KnockoutJS Templates->Preparing the project

chap2
jason.zhu 2021-05-27 05:23:23 +00:00
parent 834316a5a4
commit ee6c23d6d3
2 changed files with 45 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ko-cart/css/style.css 100644
View File

@ -0,0 +1,29 @@
.container-fluid {
margin-top: 20px;
}
.row {
margin-bottom: 20px;
}
.cart-unit {
width: 80px;
}
.btn-xs {
font-size: 8px;
}
.list-group-item {
overflow: hidden;
}
.list-group-item h4 {
float: left;
width: 100px;
}
.list-group-item .input-group-addon {
padding: 0;
}
.btn-group-vertical > .btn-default {
border-color: transparent;
}
.form-control[disabled],
.form-control[readonly] {
background-color: transparent !important;
}

92
ko-cart/index.html
View File

@ -6,84 +6,24 @@
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<h1>Catalog</h1>
<h2>Insert</h2>
<form class="form-horizontal" role="form" data-bind="with:newProduct">
<div class="form-group">
<div class="col-sm-12">
<input
type="text"
class="form-control"
placeholder="Name"
data-bind="textInput:name"
/>
<div class="container-fluid">
<div class="row" id="catalogContainer">
<div class="col-xs-12" data-bind="template:{name:'header'}"></div>
<div class="col-xs-6" data-bind="template:{name:'catalog'}"></div>
<div
id="cartContainer"
class="col-xs-6 well hidden"
data-bind="template:{name:'cart'}"
></div>
</div>
<div
class="row hidden"
id="orderContainer"
data-bind="template:{name:'order'}"
></div>
<div data-bind="template: {name:'add-to-catalog-modal'}"></div>
<div data-bind="template: {name:'finish-order-modal'}"></div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input
type="password"
class="form-control"
placeholder="Price"
data-bind="textInput:price"
/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input
type="password"
class="form-control"
placeholder="Stock"
data-bind="textInput:stock"
/>
</div>
</div>
<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>
</form>
<h2>Search</h2>
<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>
<h2>Products</h2>
<strong>Items:</strong>
<span data-bind="text:catalog().length"></span>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody data-bind="foreach:catalog">
<tr>
<td data-bind="text:name"></td>
<td data-bind="text:price"></td>
<td data-bind="text:stock"></td>
</tr>
</tbody>
</table>
<!-- vendor library -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>