本篇文章结合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){//服务器端添加成功时,同步更新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("修改成功");
}
},"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>

本文转自:http://doliangzhe3.iteye.com/blog/1874910

Knockout结合Bootstrap创建动态UI--产品列表管理的更多相关文章

  1. 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

    原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...

  2. 利用Fragment创建动态UI 之 Fragment之间的通信

    为了可以复用一个fragment,所以在定义fragment的时候,要把它定义为一个完全独立和模块化,它有它自己的layout和行为.当你定义好了这些可复用的fragment,可以把他们和activi ...

  3. 【Android Developers Training】 19. 序言:通过Fragments构建动态UI

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. Android - 用Fragments实现动态UI - 创建灵活的UI

    当设计程序来支持各种不一样的屏幕尺寸时,可以在不同的布局中重用fragment来根据可用的屏幕大小来优化用户体验. 例如,在手机上可能使用一个fragment来使用单窗口用户体验比较合适.但是,你可能 ...

  5. Android - 用Fragments实现动态UI - 创建Fragment

    你可以把fragment当作activity中的一个活动模块,它有自己的生命周期,自己接收输入消息,可以在activity运行的时候添加和删除(就像可以在其他activity中重用的"子ac ...

  6. 9) 十分钟学会android--使用Fragment建立动态UI

    为了在 Android 上为用户提供动态的.多窗口的交互体验,需要将 UI 组件和 Activity 操作封装成模块进行使用,这样我们就可以在 Activity 中对这些模块进行切入切出操作.可以用  ...

  7. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  8. Asp.net MVC 3实例学习之ExtShop(四)——完成产品列表页

    在完成产品列表页前要做一些准备功夫.首先是去下载MvcPager用了为产品列表分页.下载的可能是基于MVC 2的,没关系,可以用在MVC 3上.如果有担心,下载源代码重新编译一次好了.下载后将DLL添 ...

  9. Ribbon2: 创建动态的Ribbon库

    Sam Radakovitz曾在Excel团队博客中发表过一篇文章,介绍了如何创建动态的Ribbon库,即如何通过RibbonX和VBA放置动态的图形图像到功能区库中,在该文中,作者创建了两个库:一个 ...

随机推荐

  1. http://echarts.baidu.com/demo.html#effectScatter-map

    http://echarts.baidu.com/demo.html#effectScatter-map

  2. G729 详细使用文档

    https://tools.ietf.org/html/rfc4749 git://git.linphone.org/linphone-android.git http://stackoverflow ...

  3. PAT 1108 Finding Average [难]

    1108 Finding Average (20 分) The basic task is simple: given N real numbers, you are supposed to calc ...

  4. java中使用MD5对密码进行加密

    import org.springframework.security.authentication.encoding.MessageDigestPasswordEncoder; import org ...

  5. android 读取联系人

    设置读取权限 <uses-permission android:name="android.permission.READ_CONTACTS" />     <u ...

  6. knockout 学习使用笔记----绑定map--双向绑定

    简单的方式,使用 knockout.mapping.js. 1.引入knockout.mapping.js. 2.声明模型 var model = { task:null, feedbacks:[], ...

  7. 【转】Google的2012论文

    转自:http://www.sigvc.org/bbs/thread-1152-1-1.html Google的论文一直是业界的风向标,尤其在机器学习.分布式系统.网络等方面很多创新性的成果都是由他们 ...

  8. TOSCA自动化测试工具--打开已存在的Projects

    1.刚login账号的界面 2.找到左下角Browse,找到文件路径,选择文件,打开 3.展示已打开的project 4.这个页面上便可进行自己想要的操作 5.关闭projects,最下面状态栏进行有 ...

  9. vue package.json 解析

    vue package.json 中可以看到这个包的来源位置 在repository对象中的url中可以看到     所以当你要封装自己包的时候就可以改变这个地址去加载这个包(把你封装的包发到某个gi ...

  10. Python3.x:SQLAlchemy操作数据库

    Python3.x:SQLAlchemy操作数据库 前言 SQLAlchemy是一个ORM框架(Object Rational Mapping,对象关系映射),它可以帮助我们更加优雅.更加高效的实现数 ...