本篇文章结合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. Spring框架第五篇之Spring与AOP

    一.AOP概述 AOP(Aspect Orient Programming),面向切面编程,是面向对象编程OOP的一种补充.面向对象编程是从静态角度考虑程序的结构,而面向切面编程是从动态角度考虑程序运 ...

  2. python16_day21【git and celery】

    一.Git使用 ## GIT常用执令说明 * 初始化git项目 > git init * 查看当前目录状态 > git status * 把代码提交到stage区 > git add ...

  3. Linux系统常用命令示例

    1.在跟下创建一个目录,目录的名字为data # mkdir /data2.在data目录里创建一个文件,文件名为yunjisuan.txt # touch /data/yunjisuan.txt3. ...

  4. 怎么创建Porlet项目

    首先找到你liferay安装的地址D:\liferay\liferay-bundles-6.1.1\plugins-sdk,找到portlets这个文件夹点击(shift+鼠标右键)进入命令行窗口,写 ...

  5. Git-基本操作（同SVN）

    本人拜读了廖雪峰老师关于Git的讲述后整理所得 1.创建版本库: 版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删 ...

  6. Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3) A Is it rated?

    地址:http://codeforces.com/contest/807/problem/C 题目: C. Success Rate time limit per test 2 seconds mem ...

  7. HDU - 4609 3-idiots (FFT+母函数)

    题意:给N个数,求任意选三个数能构成三角形的概率 分析:枚举两条边之和的复杂度\(O(N^2)\),显然不行,所以要更高效地做到枚举出两边之和. 所以用生成函数搭配FFT在\(O(NlogN)\)的时 ...

  8. tensorflowxun训练自己的数据集之从tfrecords读取数据

    当训练数据量较小时,采用直接读取文件的方式,当训练数据量非常大时,直接读取文件的方式太耗内存,这时应采用高效的读取方法,读取tfrecords文件,这其实是一种二进制文件.tensorflow为其内置 ...

  9. JS正则表达式从入门到入土（3）—— 范围类

    范围类 在使用正则表达式时,很多时候,我们会想要匹配a~z的所有字母,很多人想到,可以使用字符类[abcdefg...z],但是,这种方法需要输入所有需要匹配的字母.那么,有没有简单点的方法呢? 所幸 ...

  10. DNS原理浅析

    DNS概念 DNS (Domain Name System 的缩写)的作用非常简单,就是根据域名查出IP地址.你可以把它想象成一本巨大的电话本. 查询过程 dig命令: 虽然DNS作用非常简单,但是查 ...