Knockout foreach rebind

by sas_sam

HTML

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div id="main">
  <div id="content">
    <p data-bind="text: counter()"></p>
  </div>

  <div class="list" data-bind="with: list">
    <ul data-bind="template: { name: 'personTemplate', foreach: people, as: 'people' }"></ul>
  </div>

<script type="text/html" id="personTemplate">
	<li data-bind="text: name"></li>
</script>

</div>

JavaScript

var Person = function(data) {
	this.name = ko.observable(data.name || '');
};

var elements = {
	$main : $('#main'),
  $content : $('#content')
};
var vm = {};
var ppl = ['Jack', 'Gopi', 'Bill'];

function init() {
	var people = ko.observableArray();
  
  $.each(ppl, function(idx) {
  	people.push(new Person({'name': ppl[idx]}));
  });
  
  var counter = ko.computed(function() {
  	return people().length;
  });
    
  vm = {
  	counter: counter,
    list: {
    	people: people
    }
  }
  
  ko.applyBindings(vm, elements.$main[0]);
}

function reBinds() {
	var $list	= $('.list').detach();
  elements.$content.append($list);
  
  ko.cleanNode(elements.$main[0]);
  ko.applyBindings(vm, elements.$main[0]);
}

init();

reBinds();