Bootstrap Knockout Databinding

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
     <div data-bind="foreach: $root.selectedArmy().Units">
        <div class="unitoverview">
            <!-- ko foreach: UnitMembers-->
            <div class="member">
                <div>
                    <span class="name" data-bind="text: Name, click: $parent.RemoveTest"></span>
                </div>
                <div data-bind="foreach: test">
                    <span data-bind="text:$data, click: $parent.RemoveTest"></span>
                </div>
                <h1 data-bind="text: test2"></h1>
            </div>
            <!-- /ko -->
        </div>
    </div>
<span data-bind="click:AddUnit">CLICK TO ADD UNIT</span>

JavaScript

var armymaker = armymaker || {};

//var armyMapping = {
//  'Slots': {
//    create: function (options) {
//      return new SlotViewModel(options.data);
//    }
//  }
//};

var unitMapping = {
  'UnitMembers': {
    create: function (options) {
      return new UnitMemberViewModel(options.data);
    }
  }
};

var UnitViewModel = function (unit) {
  var self = this;
  self.Name = ko.observable("unitname");
  self.UnitDefinitionId = ko.observable(unit.Id);
  ko.mapping.fromJS(unit, {}, self);
};

var UnitMemberViewModel = function (unitmemberdefinition) {
  var self = this;

  self.test = ko.observableArray([ko.observable('TEST'), ko.observable('TEST2')]);
  self.test2 = ko.observable('TEST1');
  self.RemoveTest = function () {
    self.test.splice(0,1); 
    self.Name('BUGFACE');
    self.test2('OKI!!');
  };
  ko.mapping.fromJS(unitmemberdefinition, {}, self);
};

var SlotViewModel = function (slot) {
  var self = this;
  self.selectedUnit = ko.observable(null);
  self.selectedUnit.subscribe(function () {
    if (self.selectedUnit() != "" && self.selectedUnit() != null) {
      armymaker.viewmodel.AddNewUnit(self.selectedUnit());
      self.selectedUnit('');
    }
  });
  self.Units = ko.observableArray();
  ko.mapping.fromJS(slot, {}, self);
};

var ViewModel = function () {
  var self = this;
  self.showLoader = ko.observable(false);
  self.newArmy = ko.observable({});
  self.unitToAdd = ko.observable(null);
  self.selectedArmy = ko.observable({ Template: ko.observable(''), Units: ko.observableArray() });
  self.AddUnit = function () {
      var data = {'Name': 'My name', 'UnitMembers': [
          { 'Name': 'Unitname1' }
      ] };
    self.unitToAdd(new UnitViewModel((ko.mapping.fromJS(data, unitMapping))));
    self.selectedArmy().Units.push(self.unitToAdd());
    self.unitToAdd(null);
  };
};

armymaker.viewmodel = new ViewModel();
ko.applyBindings(armymaker.viewmodel);