KO Binding after render test

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<a href="#" data-bind="click: rerun">Re-run</a>
<hr/>
<div class="container" data-bind="test: true">
    <!-- ko foreach: Items -->
        <div class="item" data-bind="text: ID"></div>
    <!-- /ko -->
</div>
<hr/>
<b id="res"></b>

CSS

hr {
    clear: both;
}

.item {
    width: 50px;
    height: 50px; 
    background: red;
    margin: 5px;
    display: inline-block;
}

JavaScript

ko.bindingHandlers.test = {
    init: 
        function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext) 
        {
       	    var val = ko.unwrap(f_valueaccessor());
						
			if(!!val)
			{	
                ko.applyBindingsToDescendants(bindingcontext, el);
                console.log((el).height());
                $('#res').html((el).height());
                return { controlsDescendantBindings: true };
            }
        }
};
    
function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    this.Items = ko.observableArray();        
    
    if(data)
        ko.mapping.fromJS(data, _mapping, _this);
    
    this.rerun = function(model, e)
    {
        _this.Items(_this.genItems());
    }
    
    this.genItems = function()
    {        
        var a = [];
        
        for(var i = 0; i < 10 + (Math.random() * 20); i++)
            a.push({ID:i});
        
        return a;
    }
    
    this.rerun();
}

var model = new Model();
ko.applyBindings(model);