Working with lists

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="foreach: people" class="container">
    <div data-bind="click: $root.select,
           css: {selected: $data == $root.selectedPerson()}" >
               <!-- ko text: name --><!-- /ko -->
               <input type="button" value="Remove" 
                   style="right:3px;top:2px; position:absolute;"
                   data-bind="click:$root.delete"/>
    </div>
</div>    

<div data-bind="visible: selectedPerson()" >
    <input type="button" data-bind="click: removeSelected" value="Remove Selected"/>
    <input type="button" data-bind="click: unSelect" value="Deselect"/>
</div>

<div data-bind="visible: selectedPerson()" class="container">
    <div>
        Selected: <!-- ko text: selectedPerson().name --><!-- /ko -->
    </div>
</div>

CSS

body {
    font-family: Arial;
}
.container {
    margin: 10px 0;
    border: solid 1px #ABF;
}
.container > div {
    padding: 4px;
    border: solid 1px #ABF;
    position: relative;
}
.selected {
    border: solid 1px #00A;
    color: #00A;
    background-color: #BCF;
}

JavaScript

// Instead of:
var viewModelJson = '[{"name": "Pepe"},{"name":"Juan"},{"name":"Luis"}]';
var viewModel = $.parseJSON(viewModelJson);

// DO this directly:

var people = [{"name": "Pepe"},{"name":"Juan"},{"name":"Luis"},{"name":"Adolfo"}];

var PeopleModel = function(people) {
    var self = this;
    self.selectedPerson = ko.observable();    // This will hold the selected person
    self.people = ko.mapping.fromJS(people);  // Note ko.mapping!!
    self.select = function(person) { // The event receives the current data as parameter
        self.selectedPerson(person);
    };
    self.delete = function(person) {
        // find de index of person and remove (splice) it from the observable array
        self.people.splice(self.people.indexOf(person),1);
        //self.selectedPerson(null);
    }
    self.removeSelected = function() {
        if (self.selectedPerson()) {
            self.delete(self.selectedPerson());
        }
    };
    self.unSelect = function() {
        self.selectedPerson(null);
    }
    return self;
};

var peopleModel = new PeopleModel(people);

ko.applyBindings(peopleModel);