Knockout结合Bootstrap创建动态UI实现产品列表管理
本篇文章结合Bootstrap创建一个比较完整的应用，对产品列表进行管理，包括产品的增加、删除、修改。
需要的引用
<scripttype='text/javascript'src='http://www.see-source.com/js/knockout-2.2.0.js'></script> <scripttype='text/javascript'src='http://www.see-source.com/js/jquery-1.6.2.min.js'></script> <linkhref="http://www.see-source.com/bootstrap/css/bootstrap.css"rel="stylesheet">
Html代码
<body> <!--动态生成产品列表--> <tableclass="tabletable-bordered"> <thead> <tr> <th>ID</th> <th>产品名称</th> <th>原价</th> <th>促销价</th> <th>操作</th> </tr> </thead> <tbodydata-bind="foreach:products"> <tr> <td> <spandata-bind="text:$data.Id"></span> </td> <td> <inputtype="text"data-bind="value:$data.Name"/> </td> <td> <inputtype="text"data-bind="value:$data.Price"/> </td> <td> <inputtype="text"data-bind="value:$data.ActualCost"/> </td> <td> <inputtype="button"class="btn"value="修改"data-bind="click:$root.update"/> <inputtype="button"class="btn"value="删除"data-bind="click:$root.remove"/> </td> </tr> </tbody> </table> <!--产品添加form--> <formclass="form-horizontal"data-bind="submit:$root.create"> <fieldset> <legend>添加产品</legend> <divclass="control-group"> <labelclass="control-label"for="input01">产品名称</label> <divclass="controls"> <inputtype="text"name="Name"class="input-xlarge"> </div> </div> <divclass="control-group"> <labelclass="control-label"for="input01">原价</label> <divclass="controls"> <inputtype="text"name="Price"class="input-xlarge"> </div> </div> <divclass="control-group"> <labelclass="control-label"for="input01">促销价</label> <divclass="controls"> <inputtype="text"name="ActualCost"class="input-xlarge"> </div> </div> <divclass="form-actions"> <buttontype="submit"class="btnbtn-primary">保存</button> <buttonclass="btn">取消</button> </div> </fieldset> </form> </body>
js代码
<scripttype="text/javascript">
functionProductsViewModel(){
varbaseUri='http://localhost:8080/knockout/';
varself=this;
//self.products=ko.observableArray([{'Id':'111','Name':'联想K900','Price':'3299','ActualCost':'3000'},{'Id':'222','Name':'HTCone','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){//服务器端添加成功时，同步更新UI
varnewProduct={};
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(newProductsViewModel());
</script>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。