Multi Lookup test

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>
<div data-bind="multiLookup: { }"></div>
<hr/>
<div id="t"></div>

JavaScript

ko.bindingHandlers.multiLookup = {
	init: 
		function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext) 
		{
			var o = f_valueaccessor();

			if(typeof(o) == 'object')
			{            				
				var markup = 
        '<!--ko with: $cfextension -->' + 
        '<input type="text" data-bind="value: Value" />' + 
        '<button data-bind="click: foo">Foo!</button>' +
        '<!-- /ko -->';
            
        var inp = $(markup).appendTo(el);
				inp.find('input[type=text]').data('__multi', true);
								
        var lookupvalue = ko.observable('Hello world');
        lookupvalue.subscribe(function() { console.log(lookupvalue()); });
        
				var lookupoptions = $.extend({}, o);
				//
				var extctx = bindingcontext.createChildContext(
					bindingcontext.$rawData, 
					null,
					function(context) 
					{
						ko.utils.extend(context, {
            	'$cfextension': {
              	Value: lookupvalue,
                foo: function() { alert('Bar!'); }
              }
            });
					}
				);
                    
				ko.applyBindingsToDescendants(extctx, el);
			}
            
			return { controlsDescendantBindings: true };            		
		}	
};



function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    this.List = ko.observableArray(['1', '2', '3']);
    
    if(data)
        ko.mapping.fromJS(data, _mapping, _this);
}

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