This article combined with bootstrap to create a more complete application of the product list management, including product additions, deletions, modifications.
Required References
<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 generated product list--> <table class= "Table table-bordered" > <thead> <tr> <th> id</th> <th> Product Name </th> <th> original price </th> <th> promotional price </th> <th> operation </TH&G
T </tr> </thead> <tbody data-bind= "foreach:products" > <tr > <td> <span data-bi nd= "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> & Lt;/tr> </tbody> </table> <!--products Add form--> <form class= "Form-horizontal "data-bind=" Submit: $root. Create "> <fieldset> <legend> Add products </legend> <DIV cl ass= "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=" con Trol-group "> <label class=" Control-label "for=" input01 "> Original price </label> <div class=" Controls "> & Lt;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-act Ions "> <button type=" Submit "class=" Btn btn-primary "> Save </button> <button class=" btn "> Cancel </but
Ton> </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 ': ' + ', ' 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 (), when the function (data) {if (data.success) {//server side is added successfully, synchronize update 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"); Self.update = function (product) {$.post (BaseUri + update, product, function (data) {if (data.success)
{Alert ("modified successfully"); }}, "JSON");
Self.remove = function (product) {$.post (BaseUri + "Delete", "productid=" +product.)
Id, function (data) {if (data.success) {//server-side deletion succeeds, the UI also deletes self.products.remove (product);
}}, "JSON");
} ko.applybindings (New Productsviewmodel ());
</script>
If you want to further study, you can click here to learn, and then attach 3 wonderful topics:
Bootstrap Learning Course
Bootstrap Practical Course
Bootstrap Plugin Usage Tutorial
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.