Knockout Combined with Bootstrap to Create Dynamic UI and Implement Product List Management

This article combines Bootstrap to create a relatively complete application, managing product lists, including the addition, deletion, and modification of products.　

NeededReference　

<script type='text/javascript' src='http://www.see-source.com/js/knockout-2.2.0.js'></script>
<script type='text/javascript' src='http://www.see-source.com/js/jquery-1.6.2.min.js'></script>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">

Html Code　

<body>
<!-- Dynamically Generate Product List -->
<table class="table table-bordered">
 <thead>
  <tr>
   <th>ID</th>
   <th>Product Name</th>
   <th>Original Price</th>
   <th>Discount Price</th>
   <th>Operation</th>
  </tr>
 </thead>
 <tbody data-bind="foreach: products">
  <tr > 
   <td> 
   <span data-bind="text: $data.Id"></span> 
   </td> 
   <td> 
   <input type="text" data-bind="value: $data.Name"/> 
   </td> 
   <td>
   <input type="text" data-bind="value: $data.Price"/> 
   </td> 
   <td> 
   <input type="text" data-bind="value: $data.ActualCost"/> 
   </td> 
   <td> 
   <input type="button" class="btn" value="Modify" data-bind="click: $root.update"/> 
   <input type="button" class="btn" value="Delete" data-bind="click: $root.remove"/> 
   </td> 
  </tr> 
 </tbody>
</table>
<!-- Product Add Form -->
<form class="form-horizontal" data-bind="submit:$root.create">
  <fieldset>
   <legend>Add Product</legend>
   <div class="control"-group">
   <label class="control-label" for="input01">Product Name</label>
   <div class="controls">
    <input type="text" name="Name" class="input-xlarge">
   </div>
   </div>
   <div class="control"-group">
   <label class="control-label" for="input01">Original Price</label>
   <div class="controls">
    <input type="text" name="Price" class="input-xlarge">
   </div>
   </div>
   <div class="control"-group">
   <label class="control-label" for="input01">Promotional Price</label>
   <div class="controls">
    <input type="text" name="ActualCost" class="input-xlarge">
   </div>
   </div> 
   <div class="form-actions">
   <button type="submit" class="btn btn-primary">Save</button>
   <button class="btn">Cancel</button>
   </div>
  </fieldset>
</form>
</body>

js code　

<script type="text/javascript">
function ProductsViewModel() { 
 var baseUri = 'http://localhost:8080/knockout/'; 
 var self = this; 
 //self.products = ko.observableArray([{'Id':'111','Name':'Lenovo K900','Price':'3299','ActualCost':'3000'},{'Id':'222','Name':'HTC one','Price':'4850','ActualCost':'4500'}]); 
  self.products = ko.observableArray();
 $.getJSON(baseUri + "list", self.products);//Load product list
 //Add product
 self.create = function (formElement) {    
  $.post(baseUri + "add", $(formElement).serialize(), function(data) {
    if(data.success){//When the server-side addition is successful, synchronize the update of UI
    var newProduct = {};
    newProduct.Id = data.ID;
    newProduct.Name = formElement.Name.value;
    newProduct.Price = formElement.Price.value; 
    newProduct.ActualCost = formElement.ActualCost.value; 
    self.products.push(newProduct);
    }
  },"json"); 
 } 
 //Update Product
 self.update = function (product) {
  $.post(baseUri + "update", product, function(data) {
    if(data.success){
     alert("Update successful");
    }
  },"json"); 
 } 
 //Delete Product
 self.remove = function (product) { 
  $.post(baseUri + "delete", "productID="+product.Id, function(data) {
    if(data.success){
    //Delete from UI when the server-side deletion is successful
    self.products.remove(product);
    }
  },"json"); 
 } 
}
ko.applyBindings(new ProductsViewModel());
</script>

If you want to learn more deeply, you can click here to learn, and I will also attach3A series of exciting special topics:

Bootstrap Learning Tutorial

Bootstrap Practical Tutorial

Bootstrap Plugin Usage Tutorial

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial