userdetails

by knockoutts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js"></script>
<div>
<button data-bind="click: editControls">
Edit
</button>
</div>
<div id="usercontact">
<input type="text" class="form-control" tabindex="1" data-bind="value: user1details.phone, enable: isEditing,  attr: {disabled: !isEditing() }">
<input type="text" class="form-control" tabindex="1" data-bind="value: user1details.email, enable: isEditing,  attr: {disabled: !isEditing() }">
<br>
<input type="text" class="form-control" tabindex="1" data-bind="value: user2details.phone, enable: isEditing,  attr: {disabled: !isEditing() }">
<input type="text" class="form-control" tabindex="1" data-bind="value: user2details.email, enable: isEditing,  attr: {disabled: !isEditing() }">
<br>
<input type="text" class="form-control" tabindex="1" data-bind="value: user3details.phone, enable: isEditing,  attr: {disabled: !isEditing() }">
<input type="text" class="form-control" tabindex="1" data-bind="value: user3details.email, enable: isEditing,  attr: {disabled: !isEditing() }">
</div>

<script id="newUserDetailTemplate" type="x-kendo-template">
<input type="text" class="form-control" tabindex="1" data-bind="value: user#:counter#details.phone, enable: isEditing,  attr: {disabled: !isEditing() }">
<input type="text" class="form-control" tabindex="1" data-bind="value: user#:counter#details.email, enable: isEditing,  attr: {disabled: !isEditing() }">
</script>

<div data-bind="htmlWithBinding:elementToAdd()">


</div>

<div id="myDiv">


</div>
<button data-bind="click: addNewUserDetail">Add New Contact</button>

TypeScript

interface knockoutBindingHandlers {
 htmlWithBinding: KnockoutBindingHandler;
}


ko.bindingHandlers.htmlWithBinding = {
  init: function() {
    return {
      'controlsDescendantBindings': true
    };
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {   
    var val = valueAccessor();
    if (val !== '') {
      $(element).append(val);
      ko.cleanNode(element);
      ko.applyBindingsToDescendants(bindingContext, element);    
    }
  }
};

function ViewModel() {

  this.isEditing = ko.observable(false);
  this.user1Phone = ko.observable('');  
  this.user1Email = ko.observable('');
  this.user2Phone = ko.observable('');  
  this.user2Email = ko.observable('');
  this.user3Phone = ko.observable('');  
  this.user3Email = ko.observable('');
  
  this.elementToAdd = ko.observable('');
  this.counter = ko.observable(4);

  this.addNewSocMember = function() {
    if (this.elementToAdd() != '') {
      this.elementToAdd('');
    }
    
    this.counter(this.counter() + 1);
    var template = kendo.template($("#newUserDetailTemplate"));
    var data = [
    {counter: this.counter()}
    ];
    this.valueAccessor(kendo.render(template,data));    
    this.elementToAdd(this.valueAccessor);
  }

  this.editControls = function() {
    this.isEditing(true);
  }
}

ko.applyBindings(new ViewModel());