Knockout结合Bootstrap创建动态UI实现产品列表管理

本篇文章结合Bootstrap创建一个比较完整的应用，对产品列表进行管理，包括产品的增加、删除、修改。

需要的引用

<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代码

<body><！-- 动态生成产品列表 --><table class="table table-bordered"><thead> <tr> <th>ID</th> <th>产品名称</th> <th>原价</th> <th>促销价</th> <th>操作</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="修改" data-bind="click: $root.update"/> <input type="button" class="btn" value="删除" data-bind="click: $root.remove"/></td></tr> </tbody></table><！-- 产品添加form --><form class="form-horizontal" data-bind="submit:$root.create"><fieldset> <legend>添加产品</legend> <div class="control-group"><label class="control-label" for="input01">产品名称</label><div class="controls"> <input type="text" name="Name" class="input-xlarge"></div> </div> <div class="control-group"><label class="control-label" for="input01">原价</label><div class="controls"> <input type="text" name="Price" class="input-xlarge"></div> </div> <div class="control-group"><label class="control-label" for="input01">促销价</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">保存</button><button class="btn">取消</button> </div></fieldset></form></body>

js代码

<script type="text/javascript">function ProductsViewModel（） { var baseUri = "http://localhost:8080/knockout/"; var self = this; //self.products = ko.observableArray（[{"Id":"111","Name":"联想K900","Price":"3299","ActualCost":"3000"},{"Id":"222","Name":"HTC one","Price":"4850","ActualCost":"4500"}]）;self.products = ko.observableArray（）;$.getJSON（baseUri + "list", self.products）;//加载产品列表//添加产品self.create = function （formElement） { $.post（baseUri + "add", $（formElement）.serialize（）, function（data） { if（data.success）{//服务器端添加成功时，同步更新UIvar 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（"修改成功"）; }},"json"）; } //删除产品self.remove = function （product） { $.post（baseUri + "delete", "productID="+product.Id, function（data） { if（data.success）{//服务器端删除成功时，UI中也删除self.products.remove（product）; }},"json"）; } }ko.applyBindings（new ProductsViewModel（））;</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。