Knockout Utility Functions

ko-util-tyr.js

http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js


ko.bindingHandlers.inlineSelect = {
    init:  function(element, valueAccessor, allBindingsAccessor){
        var span = $(element);
        var select = $('<select></select>', {'style' : 'display: none'});
        span.after(select);
        
        ko.applyBindingsToNode(select.get(0), { value: valueAccessor(), options: allBindingsAccessor().inlineOptions });
        ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
        
        span.click(function(){
            span.hide();
            select.show();
            select.focus();        
        });
        
        select.change(function(){
            span.show();
            select.hide();
        });        
    }
};

ko.bindingHandlers.inlineSelectedOptions = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var span = $(element);
        var select = $('<select></select>', {'style' : 'display: none', 'multiple': 'true'});
        span.after(select);
        
        ko.applyBindingsToNode(select.get(0), { selectedOptions: valueAccessor(), options: allBindingsAccessor().inlineOptions });
        ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
        
        span.click(function(){
            span.hide();
            select.show();
            select.focus();        
        });
        
        select.change(function(){
            span.show();
            select.hide();
        });   
    }
}

ko.bindingHandlers.inline = {
    init: function(element, valueAccessor) {
        var span = $(element);
        var input = $('<input />',{'type': 'text', 'style' : 'display:none'});
        span.after(input);
        
        ko.applyBindingsToNode(input.get(0), { value: valueAccessor()});
        ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
        
        span.click(function(){
            input.width(span.width());
            span.hide();
            input.show();
            input.focus();
        });
        
        input.blur(function() { 
            span.show();
            input.hide();
        });
        
        input.keypress(function(e){
            if(e.keyCode == 13){
               span.show();
               input.hide();
           }; 
        });
    }
};

ko.bindingHandlers.inlineToggle = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        
        var displayType = allBindingsAccessor().type || "bool";
        var displayArray = [];
        
        if (displayType == "bool") {
            displayArray = ["True", "False"];
        } else if (displayType == "on") {
            displayArray = ["On", "Off"];
        } else {
           displayArray = displayType.split("/");
        } 
        
        var target = valueAccessor();  
        var observable = valueAccessor()
        var interceptor = ko.computed(function() {
            return observable() ? displayArray[0] : displayArray[1];
        });

        ko.applyBindingsToNode(element, { text: interceptor });
        ko.applyBindingsToNode(element, { click: function(){ target(!target())}});
    }
};

ko.bindingHandlers.enterKey = {
    init: function(element, valueAccessor, allBindings, data) {
        var handler = function(data, event) {
            if (event.keyCode === 13) {
                valueAccessor().call(data, data, event);
            };
        };
        var newValueAccessor = function() {
            return { keyup: handler };
        };
        ko.bindingHandlers.event.init(element, newValueAccessor, allBindings, data);
    }
};

ko.observableArray.fn.map = function(array, model) {
    var map = ko.utils.arrayMap(array, function(i) {
        return new model(i)
    });
    this(map);
    return this;
};

ko.observable.fn.focusable = function(val) {
    this.focused = ko.observable(val);
    return this;
};

ko.observableArray.fn.moveUp = function(item) {
	var index = this.indexOf(item);
	if (index == -1 || index == 0) //Isn't in array or is already first
		return;
		
	this.remove(item);
	this.splice(index - 1, 0, item);
};

ko.observableArray.fn.moveDown = function(item) {
	var index = this.indexOf(item);
	if (index == -1 || index + 1 == this().length) //Isn't in array or is already last
		return;
		
	this.remove(item);
	this.splice(index + 1, 0, item);
};

I added the inline select to http://kosnipp.com/view?id=5450843ef1ac28b6e945043c