Knockoutjs Demo

by SpAm

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<div id="form">

  <div>
    <input type="text" data-bind="value:nonSpeciesInput" />
    <input type="text" data-bind="value:nonSpeciesInput2" />
  </div>


  <div id="species">
    <div data-species="blackbird">
      <label>Blackbird:</label>
      <button type="button" class="addSpecies">Add</button>
    </div>
    <div data-species="greatTit">
      <label>Great Tit:</label>
      <button type="button" class="addSpecies">Add</button>
    </div>
    <div data-species="robin">
      <label>Robin:</label>
      <button type="button" class="addSpecies">Add</button>
    </div>
  </div>
  <button id="myBtn">Show Data</button>
</div>




<div class="cloneMe" data-bind="with:species">
  <div>
    <input type="text" data-bind="value:count" placeholder="count" />
    <input type="text" data-bind="value:age" placeholder="age" />
  </div>
</div>

CSS

label {
  width: 100px;
}

.cloneMe {
  display: none;
}

#form {
  margin-bottom:100px;
}

textarea {
  height:100px
}

JavaScript

var myModel = function MyModel() {
	var self = this;
  this.nonSpeciesInput = ko.observable();
  this.nonSpeciesInput2 = ko.observable();

  this.species = ko.observable({});

}















model = new myModel();

ko.applyBindings(model, $('#form').get(0));

$('.addSpecies').click(function() {

  var species = $(this).closest('div').attr("data-species");

  if (model.species()[species] == undefined) {
    model.species()[species] = {
      count: "",
      age: ""
    }
  }

  var clone = $('.cloneMe').clone();
  clone.removeClass('cloneMe');
  clone.find('div').attr('data-bind', 'with:' + species);
  $(this).closest('div').append(clone);
  ko.applyBindings(model, $(this).closest('div').get(0));

});

$('#myBtn').click(function() {
  alert(ko.toJSON(model));
});