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

ljl_xyf

浏览: 636774 次
性别:
来自: 北京

最近访客更多访客>>

yangdaliang

u012363178

guotaoid

gybmike

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Bootstrap

本篇文章结合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>

分享到：