Using a form on a knockout.js template - forms

Question

I have a knockout template that is successfully receiving data. I added a form to the template with a text input and a submit input and bound an observable view model property within the text input.
When bind the text input value to the view model property ( the incoming data is lost and the button doesn't work. I'm dumping the incoming data before and after the input tag and the data is gone on the second dump.
Following is the template code snippet:
<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">
<i class="fa fa-sign-out"></i> Logout
</div>
<ul class="nav nav-tabs" data-bind="foreach: tabs">
<li data-bind="css: { active: isSelected }">
<span data-bind="html: name" />
</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>
Following is the json dump:
[
{
"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"
}
]
Can anyone help with this issue or let me know a better way?

Answer 1

Well, I found an ugly way of submitting the form without trashing my incoming data.
Here is my new form:
<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>
The value from the form is extracted in my ViewModel as follows:
NOTE: data[0] is the text input and data[1] is the button. I'm only using the text input
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);
}));
};