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>
   
   
    <input type="text" name="Name" class="input-xlarge">
   </div>
   </div>
   
   
    <input type="text" name="Price" class="input-xlarge">
   </div>
   </div>
   
   促销价
   
    
   </div>
   </div> 
   
   
   
   </div>
  </fieldset>
</form>
</body>

js代码　





著作権©2025 基本チュートリアル oldtoolbag.com