KO Error Flag Binding

by whelkaholism

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>
<button data-bind="click: set1">Name failed</button>
<button data-bind="click: set2">Email failed</button>
<button data-bind="click: clear">Clear</button>
<hr/>
<!-- ko with: Module -->
<!-- ko with: Model -->
With options in child context: <div class="efs" data-ef-for="ef__namerequired, ef__emailrequired" data-bind="ef: $parents[1].ErrorFlags"></div>
<!-- /ko -->
<!-- /ko -->
<hr/>
<div data-bind="text: CurrentErrorFlags"></div>

JavaScript

/*
 Copyright 2014 cFront Software Ltd, http://www.cfront.co.uk
 Free for any use, provided this copyright notice is maintained.
*/
ko.bindingHandlers.ef = {
	init:
    	function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
    	{
			// Get current value of supplied value
			var field = f_valueaccessor();
			var itemid = ko.unwrap(allbindings.get('efid'));
						
			if(!!ko.unwrap(field))
			{
                var elflags = $(el).data('ef-for').split(/\s*,\s*/);
			
                var visibleFlags = ko.computed(
                    function()
                    {
                        var res = [];
                        
                        for(var i = 0; i < elflags.length; i++)
                        {					
                            var err = ko.utils.arrayFirst(ko.unwrap(field), function(x) { return x.Flag == elflags[i] && (!itemid || itemid == x.ItemID); });

                            if(err)
                                res.push(err);                        
                            
                        }                
                       	console.log("COMPUTED", ko.unwrap(field), res);
                            
                        return res;
                    }
                );
                
                $(el).empty();
				
					$('<div class="ef static" data-bind="text: Message"></div>').appendTo(el); // Make static flag as visiblity set by KO on bind
                
					ko.applyBindingsToNode(el, { foreach: visibleFlags });
            }
            
            return { controlsDescendantBindings: true };
        }
};
function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    this.ErrorFlags = ko.observableArray();
    
    this.Module = ko.observable({ Model: ko.observable({}) });
    
    this.CurrentErrorFlags = ko.computed(
		function()
    	{
           	var a = [];
        	
            $.each(_this.ErrorFlags(), function() {...