using namespace kyle;

Knockout

Kyle Kirby
March 8, 2012
Good Evening. I've recently become very interested in Knockout.js. So much so that I've made my own bindings. These bindings are used to join jQuery UI drag/drop/sortable to knockout. I've seen some implementations, but I wasn't very fond of them. Here is a quick feature list: 1. Binding an observableArray to a UI Sortable 2. Binding an observable to droppable/draggable. 3. Defining what can be dropped on sortable/droppable by using an extension. 4. Binding sortable to a computed property. It's far more extensive than this, but here is the code: http://jsfiddle.net/7SFuR/4/
<script type="text/javascript">
(function(ko,jQuery){
	/**
	 * To allow dropping between sortables and droppables,
	 * we define a varaible in our scope
	 * that tells wether or not a ko.droppable binding
	 * handled the event, that way the sorting
	 * doesn't randomly sort.
	 */
	var dropped = false;
	
	// A basic binder that allows the element to be dragged.
	ko.bindingHandlers.draggable = {
		modelKey: 'ko.bindingHandlers.draggable.model',
		update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			// Define the owning modle of this element.
			$(element).data(ko.bindingHandlers.draggable.modelKey,ko.utils.unwrapObservable(valueAccessor()))
			// Make it draggable.
			$(element).draggable();
		}
	}
	
	// A binder to allow an element to be dropped on.
	// This works for sortable and draggable.
	ko.bindingHandlers.droppable = {
		makeValueAccessor: function(valueAccessor){
			var bindingValue = valueAccessor();
			if(typeof bindingValue.data == 'undefined'){
				return {
					data: bindingValue,
					droppable: {}
				};
			}
			else {
				return {
					data: bindingValue.data,
					droppable: bindingValue.droppable || {}
				};
			}
		},
		update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			var options = ko.bindingHandlers.droppable.makeValueAccessor(valueAccessor);
			var model = options.data;
			
			$(element).droppable(
				$.extend(
					{},
					options.droppable,
					{
						accept: function(dragging){
							// Check for the 'accept' method on the property
							if(typeof model.accept == 'function'){
								// Evaluate and return the 'accept' method,
								// passing in the model and the element being
								// dragged.
								return model.accept(
									$(dragging).data(ko.bindingHandlers.draggable.modelKey),dragging
								);
							}
							else {
								return true;
							}
						},
						drop: function(event,ui){
							// In case of sortable being dropped here,
							// we need to tell the sortable not to sort.
							// This global variable does just that.
							dropped = true;
							if(typeof model.onDrop == 'function'){
								// Evaluate the onDrop method of the model
								// passing in the model dropped on it,
								// the event, and jQuery UI Map
								return model.onDrop(
									$(ui.draggable).data(ko.bindingHandlers.draggable.modelKey),
									event,
									ui
								);
							}
							else {
								return true;
							}
						}
					}
				)
			)
		}
	}
	
	ko.bindingHandlers.sortable = {
		arrayKey: 'ko.bindingHandlers.sortable.array',
		makeTemplateValueAccessor: function(valueAccessor){
			// Manditory afterAdd event.
			var afterAdd = function(element,index,model){
				// Bind the model to the element for retrieval
				// later.
				$(element).data(ko.bindingHandlers.draggable.modelKey,model);
			}
			
			return function(){
				var bindingValue = ko.utils.unwrapObservable(valueAccessor());
				if((!bindingValue) || typeof bindingValue.length == 'number'){
					return {
						containerArray: valueAccessor(),
						foreach: valueAccessor(),
						afterAdd: afterAdd,
						// Extended options for the sortable.
						sortable: {}
					};
				}

				return {
					containerArray: bindingValue.data,
					foreach: ko.utils.unwrapObservable(bindingValue.data),
					includeDestroyed: bindingValue.includeDestroyed || false,
					afterAdd: function(element,index,model){
						// Make sure to execute the manditory afterAdd
						afterAdd(element,index,model);
						(bindingValue.afterAdd || function(){})(element,index,model)
					},
					beforeRemove: bindingValue.beforeRemove || function(){},
					afterRender: bindingValue.afterRender || function(){},
					// Extended options for the sortable.
					sortable: bindingValue.sortable || {}
				};
			}
		},
		init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			// Get the options
			var options = ko.bindingHandlers.sortable.makeTemplateValueAccessor(valueAccessor);
			// Assign a reference of the observableArray to the dom element.
			$(element).data(ko.bindingHandlers.sortable.arrayKey,options().containerArray);
			
			// Initalize the template
			ko.bindingHandlers.template.init(
				element,
				options,
				allBindingsAccessor,
				viewModel,
				bindingContext
			);
			
			// Create the sortable
			$(element).sortable(
				// Merge options
				$.extend(
					{},
					options().sortable,
					{
						allowMultiple: false,
						// Connects with everything.
						connectWith: '*',
						// This defines better what can be connected
						// to this sortable. (This is a mod on jQuery UI)
						connectWithCallback: function(event,ui){
							var containerArray = ui.instance.element.data(ko.bindingHandlers.sortable.arrayKey);
							var model = this.currentItem.data(ko.bindingHandlers.draggable.modelKey);
							if(typeof containerArray.accept == 'function'){
								return containerArray.accept(model,options().containerArray,this.currentItem);
							}
							else {
								return true;
							}
						},
						// Handle stopping of sorting
						// This will update the observableArrays
						stop: function(event,ui){
							// Who we're sending to.
							var target = $(ui.item.data('sortableItem').currentContainer.element);
							// Who's sending it.
							var sender = $(event.target);
							// What's the UI element?
							var droppedElement = $(ui.item);
							// The model that is being sent.
							var droppedModel = droppedElement.data(ko.bindingHandlers.draggable.modelKey);
							// The observableArray of the sender.
							var senderArray = sender.data(ko.bindingHandlers.sortable.arrayKey);
							// The ObservableArray of the receiver.
							var targetArray = target.data(ko.bindingHandlers.sortable.arrayKey);
							// The offset the item was placed at.
							var targetOffset = droppedElement.prevAll().length;
							// Cancel the default action, since we'll be updating
							// everything using ko bindings
							sender.sortable('cancel');
							// This is different than above because
							// we've ran cancel(), which put the item
							// back to it's start.
							var senderOffset = droppedElement.prevAll().length;
							
							function clearComputedData(){
								// We want to tell the template engine to
								// refresh this node. To do this,
								// we grab the old array that the template
								// engine uses to determine wether or not
								// a change was made.
								// Set the key
								var key = "setDomNodeChildrenFromArrayMapping_lastMappingResult";
								// Grab the array.
								var current = ko.utils.domData.get(sender.get(0),key);
								// Set the item at the offset that was dragged from
								// to undefined, this way the template engine will
								// recreate the node.
								current[senderOffset].arrayEntry = undefined;
								// We reassign the data.
								ko.utils.domData.set(sender.get(0),key,current);
							}
							
							function refresh(){
								// Remove the item from the sender and make sure it that was
								// the model that was dropped on the target ...
								if(senderArray.splice(senderOffset,1)[0] != droppedModel){
									throw new Error("Something went horribly wrong.");
								}
								// add it back to the sender.
								senderArray.splice(senderOffset,0,droppedModel);
							}
							
							// If the item was dropped on a droppable
							// this variable will be true.
							// If it is, then we want to restore
							// the sortable so nothing gets
							// messed up by accident upon dragging.
							if(dropped == true){
								dropped = false;
								// If the sender is a computed observable
								if(senderArray.__ko_proto__ == ko.computed){
									clearComputedData();
									// We notify subscribers that this computed
									// observable has changed.
									senderArray.notifySubscribers();
									// We remove the ui element.
									droppedElement.remove();
								}
								else {
									refresh();
									droppedElement.remove();
								}
								// end excution. If the sender was not computed,
								// we just let the dragged element go back to its
								// place.
								return;
							}
							
							
							// We validate that the target can accept this drop.
							if(
								typeof targetArray.accept == 'function' &&
								targetArray.accept(droppedModel,senderArray,droppedElement) == true
							){
								// Read the comments above for how this works.
								if(senderArray.__ko_proto__ == ko.computed){
									clearComputedData();
								}
								else {
									if(senderArray.splice(senderOffset,1)[0] != droppedModel){
										throw new Error("Something went horribly wrong.");
									}
								}
								// We add the element to the target.
								targetArray.splice(targetOffset,0,droppedModel);
								
								// Remove the dragged entity.
								droppedElement.remove();
							}
							else {
								if(senderArray.__ko_proto__ != ko.computed){
									refresh();
									droppedElement.remove();
								}
							}
						}
					}
				)
			);
			
			// Here, we override the _rearrange method to allow
			// us to better define what's allowed to be to connected
			// and what's not.
			
			// Grab an instance of the sortable.
			var data = $(element).data('sortable');
			// Assign a backup for _rearrange
			data._rearrangeOld = data._rearrange;
			// Overwrite _rearrange
			data._rearrange = function(event,ui){
				// If the options supplied to this sortable
				// contain the method 'connectWithCallback'
				// then we run it, supplying the event
				// and the ui variable. 
				if(typeof this.options.connectWithCallback == 'function'){
					if(this.options.connectWithCallback.apply(this,[event,ui])){
						// We can accept this sort, call the old _rearrange
						return data._rearrangeOld.apply(this,arguments);
					}
					else{
						return false;
					}
				}
				else {
					return data._rearrangeOld.apply(this,arguments);
				}
			}
		},
		update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){				
			// Update the template.
			ko.bindingHandlers.template.update(
				element,
				ko.bindingHandlers.sortable.makeTemplateValueAccessor(valueAccessor),
				allBindingsAccessor,
				viewModel,
				bindingContext
			);
		}
	}
	
	// Simple binding that removes an element from an observableArray
	// data-bind="remove: customers", this will remove the current
	// model (in context) from the customers array.
	ko.bindingHandlers.remove = {
		update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
			$(element).click(function(){
				valueAccessor().remove(viewModel);
				return false;
			});
		}
	}
	
	// This extender allows you to handle droppable things, such as
	// what the droppable can accept, and what to do when an
	// object is dropped.
	ko.extenders.droppable = function(target, options){
		target.accept = options.accept || function(model, source, element){return true;};
		target.onDrop = options.onDrop || function(model,event,ui){};
		return target;
	}
	
	ko.extenders.nonMultipleDroppable = function(target, options){
		target.accept = function(model,source, element){
			if(source == target){
				console.log('is same');
				return true;
			}
			else if(target.indexOf(model) == -1){
				console.log('does not contain');
				return (options.accept || function(){return true;})(model,source,element);
			}
			else {
				console.log('denied');
				return false;
			}
		};
		target.onDrop = options.onDrop || function(model,event,ui){};
		return target;
	}
	
})(ko,jQuery);
</script>
using namespace kyle; - knockout

Knockout
