Push an update to current JSON Object
HTML
<div style="overflow:auto;padding-left:9px;height:100%;box-shadow: 0px 0px 5px #cfcfcf;">
<ul class="nav nav-pills" style="margin:9px">
<!-- ko if: analysisLogTitle() == "Warnings" -->
<li class="active"><a href="#" data-bind="click: changeAnalysisLog.bind($root, 'Warnings')">Warnings</a></li>
<!-- /ko -->
<!-- ko if: analysisLogTitle() != "Warnings" -->
<li><a href="#" data-bind="click: changeAnalysisLog.bind($root, 'Warnings')">Warnings</a></li>
<!-- /ko -->
<!-- ko if: analysisLogTitle() == "Errors" -->
<li class="active"><a href="#" data-bind="click: changeAnalysisLog.bind($root, 'Errors')">Errors</a></li>
<!-- /ko -->
<!-- ko if: analysisLogTitle() != "Errors" -->
<li><a href="#" data-bind="click: changeAnalysisLog.bind($root, 'Errors')">Errors</a></li>
<!-- /ko -->
</ul>
<table class="table table-hover" data-bind="foreach: analysisLogData" style="margin:9px">
<thead>
<tr>
<th style="width:100px">Numero</th>
<th>Description</th>
</tr>
</thead>
<tbody data-bind="visible: $root.analysisLogTitle() === 'Warnings', foreach: $data.Warnings">
<tr>
<td data-bind="text: number"></td>
<td data-bind="text: description"></td>
</tr>
</tbody>
<tbody data-bind="visible: $root.analysisLogTitle() === 'Errors', foreach: $data.Errors">
<tr>
<td data-bind="text: number"></td>
<td data-bind="text: description"></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-warning" data-bind="click: function()...
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
JavaScript
function AppViewModel() {
var self = this;
self.analysisLogData = ko.observableArray();
self.analysisLogTitle = ko.observable("Warnings")
self.changeAnalysisLog = function(title) {
self.analysisLogTitle(title)
}
var data =
{
"Warnings": ko.observableArray([
{
"number": 3002,
"description": "There may be a problem with the device you are using if you use the default profile"
},
{
"number": 3001,
"description": "There may be a problem with the device you are using if you don't use the default profile"
}
])
,
"Errors": ko.observableArray([
{
"number": 1000,
"description": "No networks are loaded"
},
{
"number": 1002,
"description": "No devices are loaded"
}])
}
self.addLog = function (type, content) {
self.analysisLogData()[0][type].push({
"value":true
});
}
self.analysisLogData.push(data)
}
ko.applyBindings(new AppViewModel());