<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link data-require="toastr@*" data-semver="1.3.0" rel="stylesheet" href="//www.johnpapa.net/scripts/toastr.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Hello knockout job CRUD example!!</h1>
<div class="row">
<div class="col-md-12">
<p class="text-right">
<button class="btn btn-success" data-bind="click: ShowForm">Add new job</button>
</p>
</div>
</div>
<div class="row ">
<div class="col-md-12 ">
<h2>Jobs i got</h2>
<table class="table ">
<thead>
<tr>
<td>Company</td>
<td>Job title</td>
<td>Description</td>
<td>Editable</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr data-bind="with: newJob">
<td>
<input type="text" class="form-control" data-bind="value: company" placeholder="Company Name">
</td>
<td>
<input type="text" class="form-control" data-bind="value: jobTitle" placeholder="Job Title">
</td>
<td>
<input type="text" class="form-control" data-bind="value: description" placeholder="Description">
</td>
<td></td>
<td>
<button class="btn btn-xs btn-info" data-bind="click: addNewJob">Save</button>
<button class="btn btn-xs btn-danger" data-bind="click: cancelNewJob">Cancel</button>
</td>
</tr>
<!-- ko foreach: jobs -->
<tr data-bind="visible: !editable()">
<td data-bind="text: company">Test</td>
<td data-bind="text: jobTitle">Test</td>
<td data-bind="text: description">Test</td>
<td data-bind="text: editable">Test</td>
<td>
<button class="btn btn-xs btn-info" data-bind="click: editJob">Edit</button>
<button class="btn btn-xs btn-danger" data-bind="click: deleteJob">Delete</button>
</td>
</tr>
<tr data-bind="with: edit">
<td>
<input type="text" class="form-control" data-bind="value: company">
</td>
<td>
<input type="text" class="form-control" data-bind="value: jobTitle">
</td>
<td>
<input type="text" class="form-control" data-bind="value: description">
</td>
<td data-bind="text: editable">Test</td>
<td>
<button class="btn btn-xs btn-info" data-bind="click: acceptEdit">Save</button>
<button class="btn btn-xs btn-danger" data-bind="click: cancelEdit">Cancel</button>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<pre data-bind="text: ko.toJSON($root, null, 2)">
</pre>
</div>
</div>
</div>
<script data-require="jquery@* " data-semver="2.0.3 " src="http://code.jquery.com/jquery-2.0.3.min.js "></script>
<script data-require="bootstrap@3.0.3 " data-semver="3.0.3 " src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js "></script>
<script data-require="knockout@3.0.0 " data-semver="3.0.0 " src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js "></script>
<script data-require="knockout-validation@1.0.2" data-semver="1.0.2" src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.js"></script>
<script data-require="toastr@*" data-semver="1.3.0" src="//www.johnpapa.net/scripts/toastr.min.js"></script>
<script src="Constructor.js "></script>
<script src="ViewModel.js "></script>
</body>
</html>
/* Styles go here */
var job = function(data) {
this.company = ko.observable().extend({
required: true
});
this.jobTitle = ko.observable();
this.description = ko.observable();
this.editable = ko.observable(false);
this.edit = ko.observable();
if (data) {
this.update(data);
}
};
job.prototype.update = function(data) {
this.company(data.company);
this.jobTitle(data.jobTitle);
this.description(data.description);
};
var viewModel = (function() {
jobs = ko.observableArray();
newJob = ko.observable();
ShowForm = function() {
newJob(new job());
};
addNewJob = function() {
var j = ko.toJS(newJob());
jobs.unshift(new job(j));
toastr.success('Job ' + '"' + j.company + '"' + ' added');
newJob(null);
};
cancelNewJob = function() {
newJob(null);
};
deleteJob = function(data) {
jobs.remove(data);
toastr.success('Job removed');
};
editJob = function(item) {
var backup = ko.toJS(item);
item.edit((new job(backup)));
item.editable(true);
};
cancelEdit = function(item) {
item.editable(false);
item.edit(null);
};
acceptEdit = function(item) {
var updatedItem = ko.toJS(item);
item.editable(false);
item.update(updatedItem);
item.edit(null);
toastr.success('Job ' + '"' + item.company() + '"' + ' updated');
};
return {
newJob: newJob,
jobs: jobs
};
})();
ko.applyBindings(viewModel);