Knockoutjs [object Object]

by Gonzalo Guevara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="base-person" style="border: 3px solid red; margin-bottom: 15px">
<h3 style="background: red; margin: 0; color:#fff;margin-bottom: 5px;">
Base person
</h3>

  <div class="control-group">
    <label for="full_name" class="control-label">Name:
      <span class="">*</span>
    </label>
    <input id="full_name" type="text" name="full_name" placeholder="full_name" class="span12" data-bind="textInput: nameGlobal" />

  </div>

  <div class="control-group ">
    <label for="id" class="control-label">Id:
      <span class="">*</span></label>
    <input id="id" type="text" name="id" placeholder="Id" class="span12" data-bind="textInput: idGlobal" />
  </div>

  <div class="control-group ">
    <label for="adress" class="control-label">Adress:
      <span class="">*</span></label>
    <input id="adress" type="text" name="adress" placeholder="adress" class="span12" data-bind="textInput: addressGlobal" />
  </div>

  <label class="checkbox">
    <input type="checkbox" data-bind="checked: sameData"> Use same data for all(not the name).
  </label>
  
</div>


<div class="person" data-bind='foreach: persons'>

  <label class="checkbox">
    <input type="checkbox" data-bind="checked: isBased"> Use data of <strong>base person</strong>(not the name).
  </label>
  <span data-bind="if: isBased">
    <a href="" data-bind="click: $root.editThis">Edit this(click to edit only this)</a>
  </span>
  
  
  <div class="mas" data-bind="if: $root.sameData">
    <div class="loco-warp" data-bind="template: {name: 'reading'}">
      
    </div>
  </div>

  <div class="mas" data-bind="ifnot: $root.sameData">
    <div class="loco-warp" data-bind="template: {name: 'writing'}">
      
    </div>
  </div>
  

</div>

<!--  templates -->
<script type="text/html" id="writing">
<div class="write" style="border: 2px solid blue;...

JavaScript

function Person(datos) {
  var self = this;
  datos = datos || {};
  self.fullName = ko.observable(datos.fullName) || '';
  self.id = ko.observable(datos.id) || '';
  self.address = ko.observable(datos.address) || '';
  self.isBased = ko.observable(datos.isBased);
}


var personsViewModel = function() {
  var self = this;
  
  

  self.sameData = ko.observable(false);
  self.persons = ko.observableArray([]);

  var personsRaw = [{
    fullname: 'Person One',
    id: '1',
    address: 'Adress One'
  }, {
    fullname: 'Person Two',
    id: '2',
    address: 'Adress Two'
  }, {
    fullname: 'Person Three',
    id: '3',
    address: 'Adress Three'
  }];
  
  var personBase = personsRaw[0];
  
  //global person
  self.nameGlobal = ko.observable(personBase.fullname);
  self.idGlobal = ko.observable(personBase.id);
  self.addressGlobal = ko.observable(personBase.address);

  self.editThis = function(){
  	alert('How to edit only this, show input fields to change data in the model');
  }
  self.applyData = ko.observable(false);


  var personMinusBasePerson = personsRaw;
  personMinusBasePerson.splice(0, 1);
  var temPersons = [];

  $.each(personMinusBasePerson, function(index, value) {

    temPersons.push(new Person({
      fullName: value.fullname,
      id: value.id,
      address: value.address,
      isBased: false
    }));
  });

  self.persons(temPersons);
  



};

ko.applyBindings(new personsViewModel());