Knockout Show/Hide

by Mark

HTML

<div data-bind="with: newModel, visible: isAddingNew()">
    <input data-bind="value: name" placeholder="enter new name" />
    <button data-bind="click: $parent.save">Save and close</button>
    <button data-bind="click: $parent.saveAndAdd">Save and Add Another</button>
</div>
<div>
    <ul data-bind="foreach: persons">
        <li data-bind="text: name" />    
    </ul>
    <button data-bind="click: addPerson">Add person</button>
</div>

JavaScript

function personModel(name) {
    var self = this;
    self.name = ko.observable(name);
}

// Overall viewmodel for this screen, along with initial state
function viewModel() {
    var self = this;
    self.newModel = ko.observable();
    self.isAddingNew = ko.observable(false);
    
    // Editable data
    self.persons = ko.observableArray([
        new personModel("Steve"),
        new personModel("Bert")
    ]);
    
    self.addPerson = function () {
        self.newModel(new personModel(""));
        self.isAddingNew(true);
    };
    
    self.save = function (person) {
        self.persons.push(person);
        self.isAddingNew(false);
    };
    
    self.saveAndAdd = function (person) {
        self.save(person);
        self.addPerson();
    };
}

ko.applyBindings(new viewModel());