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>
   <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>

또한 더 깊이 배우고 싶다면, 여기를 클릭하여 학습할 수 있습니다. 또한, 다음을 추가합니다:3많은 흥미로운 주제:

Bootstrap 학습 교본

Bootstrap 실전 교본

Bootstrap 플러그인 사용 교본

이것이 이 문서의 전체 내용입니다. 많은 도움이 되길 바랍니다. 또한, 나아가는 지침 교본에 많은 지원을 부탁드립니다.

언급: 이 문서의 내용은 인터넷에서 가져옴, 저작권자 소유, 인터넷 사용자가 자발적으로 기여하고 자신의 사이트에 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으면, notice#w로 이메일을 보내 주세요.3codebox.com에 신고를 위해 #을 @으로 변경하고, 관련 증거를 제공하십시오. 사실이 확인되면, 이 사이트는 즉시 의심스러운 저작권 내용을 삭제할 것입니다.

기본 튜토리얼

좋아하는 것