Wrap binding handler

An alternative to virtual tags

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<div id="no-other-tags">
  <div data-bind="wrap: {foreach: arr}" data-bind-inner="text: $data"></div>
</div>
<pre data-bind="text: html"></pre>

JavaScript

console.clear();

ko.bindingHandlers.wrap = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var outerBinding = valueAccessor(),
      vNodeOpen = document.createComment('ko'),
      vNodeClose = document.createComment('/ko');
    element.dataset.bind = element.dataset.bindInner;
    // Enclose element in comment nodes
    element.parentNode.insertBefore(vNodeClose, element);
    element.parentNode.insertBefore(element, vNodeClose);
    element.parentNode.insertBefore(vNodeOpen, element);
    ko.applyBindingsToNode(vNodeOpen, outerBinding, bindingContext);
  }
};

vm = {
  arr: ko.observableArray([1, 2, 3]),
  html: ko.observable()
};

ko.applyBindings(vm);
vm.arr.subscribe(function() {
  vm.html(document.getElementById('no-other-tags').innerHTML);
});
vm.arr.notifySubscribers();
setTimeout(function () {
	vm.arr.push('extra');
}, 1500);