Constructor functions

Including knockout for each on observable array

by jiggle

HTML

<h1>Job App Tracker</h1>

<div data-bind="foreach: apps">
    <p>
    <b data-bind="visible: !editing(), text: title, click: edit">&nbsp;</b>    
    <input type="text" class="form-control" data-bind="visible: editing, value: title, hasFocus: editing()" /> 
    <b data-bind="visible: !editing(), text: description, click: edit">&nbsp;</b>
    <input type="text" class="form-control" data-bind="visible: editing, value: description, hasFocus: editing()" /> 
    <b data-bind="visible: !editing(), text: company, click: edit">&nbsp;</b>
    <input type="text" class="form-control" data-bind="visible: editing, value: company, hasFocus: editing()" /> 
    <b data-bind="visible: !editing(), text: submit_date, click: edit">&nbsp;</b>
    <input type="text" class="form-control" data-bind="visible: editing, value: submit_date, hasFocus: editing()" /> 
    <b data-bind="visible: !editing(), text: link, click: edit">&nbsp;</b>
    <input type="text" class="form-control" data-bind="visible: editing, value: link, hasFocus: editing()" />
    </p>
</div>
<button data-bind="click:read">Read</button>

JavaScript

// Job app object:
function JobApp(title, description, company, submit_date, link) {
    var self = this;

    self.title = ko.observable(title);
    self.description = ko.observable(description);
    self.company = ko.observable(company);
    self.submit_date = ko.observable(submit_date);
    self.link = ko.observable(link);

    self.editing = ko.observable(false);

    self.edit = function () {
        console.log('switch to edit');
        self.editing(true);
    };
    self.read = function () {
        console.log('switch to read');
        self.editing(false);
    };
}

// Main KO logic:
function AppViewModel() {
    var self = this;

    self.apps = ko.observableArray([new JobApp('Noodle Picker', 'Picks, noodles, and leaves', 'Noodle Pickers, Inc.', '2014-1-25', 'noodlepickers.com'),
    new JobApp('Not A Real Job', 'Not a real job', 'Not A Real Company', '1969-1-1', 'nope.com')]);

}

ko.applyBindings(new AppViewModel());