knockout.js 템플릿에 양식 사용

Question

데이터를 성공적으로 수신 할 수있는 녹아웃 템플릿이 있습니다. 텍스트 입력과 제출 입력으로 템플릿에 폼을 추가하고 텍스트 입력 내에서 관찰 가능한 뷰 모델 속성을 바인딩했습니다.

뷰 모델 속성에 텍스트 입력 값을 바인딩 할 때 (들어오는 데이터가 손실되고 단추가 작동하지 않음) 입력 태그 앞뒤에 들어오는 데이터를 덤프하고 두 번째 .

[ 
    { 
    "cameraid": 1, 
    "name": "WS-LICAM01", 
    "job": "100", 
    "status": "CheckedOut", 
    "textColor": "#FF0000" 
    }, 
    { 
    "cameraid": 2, 
    "name": "WS-LICAM02", 
    "job": "916", 
    "status": "CheckedOut", 
    "textColor": "#FF0000" 
    }, 
    { 
    "cameraid": 3, 
    "name": "WS-LICAM03", 
    "job": "956", 
    "status": "CheckedOut", 
    "textColor": "#FF0000" 
    }, 
    { 
    "cameraid": 4, 
    "name": "WS-LICAM04", 
    "job": "956", 
    "status": "CheckedOut", 
    "textColor": "#FF0000" 
    }, 
    { 
    "cameraid": 5, 
    "name": "WS-LICAM05", 
    "job": "9999", 
    "status": "CheckedOut", 
    "textColor": "#FF0000" 
    } 
] 

사람이이 문제를 돕거나 저를 할 수 있습니다 :

<div class="container"> 
    <div style="width:100%;"> 
     <div class="panel panel-primary" style="max-width:700px; margin:0 auto;"> 
      <div class="panel panel-heading" style="text-align:right"> 
       <a href="/Authentication/Logout" style="text-decoration:none; color:white"><i class="fa fa-sign-out"></i> Logout</a> 
      </div> 
      <ul class="nav nav-tabs" data-bind="foreach: tabs"> 
       <li data-bind="css: { active: isSelected }"> 
        <a href="#" data-bind="click: $parent.selectedTab"><span data-bind="html: name" /> </a> 
       </li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active" data-bind="template: { name: getTemplate, data: getTemplateData }"></div> 
      </div> 
     </div> 
    </div> 
</div> 

<script id="0" type="text/html"> 
    <br /> 

    <div class="row" style="margin-left:1px; margin-right:5px; margin-top:10px; margin-bottom:10px;"> 

     <form> 
      <div> 
       <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre> 
       <input type="text" data-bind="value: $parent.cameraName, valueUpdate: 'afterkeydown'" placeholder="New Camera Name..." /> 
       <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre> 
       <input type="submit" data-bind="click: $parent.addCamera" value="ADD" /> 
      </div> 
     </form> 

    </div> 

    <div data-bind="foreach: $data"> 
     <div class="rounded-radius-5"> 
      Name: <span class="spaces" data-bind="text: name"></span> | 
      <span class="spaces"></span> 
      Job: <span class="spaces" data-bind="text: job"></span> | 
      <span class="spaces"></span> 
      Status: <span data-bind="style: { color: textColor }"><span class="spaces" data-bind="text: status"></span></span> 
      <div style="text-align:right; float: right"><span class="glyphicon glyphicon-trash"></span></div> 
     </div> 
    </div> 


</script> 

다음은 JSON 덤프입니다 : 덤프

에 이어 템플릿 코드입니다 더 좋은 방법을 알아?

Answer 1

음, 들어오는 데이터를 휴지하지 않고 양식을 제출하는 추악한 방법을 발견했습니다.

다음과 같은 형태의 값이 제 뷰 모델에서 추출

<script id="0" type="text/html"> 
    <div class="row" style="margin-left:1px; margin-right:5px; margin-top:10px; margin-bottom:10px;"> 
     <form data-bind="submit: $parent.addCamera"> 
      <input type="text" name="tbxCamera" id="tbxCamera" placeholder="New Camera Name..." /> 
      <button type="submit">ADD</button> 
     </form> 
    </div> 
    <br /> 
    <div><p><h4>Checked Out</h4></p></div> 
    <div style="overflow-y:scroll; height:auto; max-height:160px;"> 
     <div data-bind="foreach: $data"> 
      <!-- ko if: checkedOut --> 
      <div class="rounded-radius-5"> 
       Name: <span class="spaces" data-bind="text: name"></span> | 
       <span class="spaces"></span> 
       Job: <span class="spaces" data-bind="text: job"></span> | 
       <span class="spaces"></span> 
       Status: <span data-bind="style: { color: textColor }"><span class="spaces" data-bind="text: status"></span></span> 
       <div style="text-align:right; float: right"><span class="glyphicon glyphicon-trash"></span></div> 
      </div> 
      <!-- /ko --> 
     </div> 
    </div> 
    <br /> 
    <div><p><h4>Checked In</h4></p></div> 
    <div style="overflow-y:scroll; height:auto; max-height:160px;"> 
     <div data-bind="foreach: $data"> 
      <!-- ko ifnot: checkedOut --> 
      <div class="rounded-radius-5"> 
       Name: <span class="spaces" data-bind="text: name"></span> | 
       <span class="spaces"></span> 
       Job: <span class="spaces" data-bind="text: job"></span> | 
       <span class="spaces"></span> 
       Status: <span data-bind="style: { color: textColor }"><span class="spaces" data-bind="text: status"></span></span> 
       <div style="text-align:right; float: right"><span class="glyphicon glyphicon-trash"></span></div> 
      </div> 
      <!-- /ko --> 
     </div> 
    </div> 
</script> 

:

주 : 데이터 [0] [1] 텍스트 입력 데이터이며 여기

내 새로운 형태 버튼. 텍스트 입력 만 사용 중입니다.

self.addCamera = function (data, event) { 
    var newCamera = [{ 
     CameraId: 6, 
     Name: data[0].value, 
     Job: 'N/A', 
     Status: 'CheckedIn' 
    }]; 

    self.cameras($.map(newCamera, function (item) { 
     return new camera(item); 
    })); 
};