KnockoutJS binding handlers

gistfile1.txt

/**
 * KnockoutJS Binding handler to select from array correct index based on stored key.
 * This allows a model with `model_id` set to properly select the correct option after binding, when they become available.
 */
ko.bindingHandlers.optionsSelect = {
    init: function(element, valueAccessor, allBindingsAccessor, deprecated, bindingContext) {
        //console.log('optionsSelect: ', ko.unwrap(valueAccessor()), ko.unwrap(allBindingsAccessor()), bindingContext);
        var input = ko.unwrap(valueAccessor().input);
        var output = ko.unwrap(valueAccessor().output);
        var condition = ko.unwrap(valueAccessor().condition);
        var options = ko.unwrap(allBindingsAccessor().options);
        if (input && options && output) {
            bindingContext.$data[output] = ko.utils.arrayFirst(options, function(item) {
                if (condition) {
                    var match = null;
                    ko.utils.objectForEach(condition, function(key, val) {
                        if (match !== false) match = (input[key] === item[val]);
                    });
                    return match;
                } else {
                    return (item._id ===  input);
                }
            });
            // We're doing initial setup, reset dirty.
            if (bindingContext.$data._isDirty !== undefined) bindingContext.$data._isDirty = false;
            if (bindingContext.$parent._isDirty !== undefined) bindingContext.$parent._isDirty = false;
        }
    }
};


/**
 * KnockoutJS Binding Handler for jQuery-UI date-picker initalisation.
 */
ko.bindingHandlers.datePicker = {
    init: function(element, valueAccessor, allBindingsAccessor, deprecated, bindingContext) {
      $(element).datepicker({
        dateFormat: '@' // Unix Epoch in miliseconds.
      });
    }
};

<select data-bind="options: estimations,
    optionsText: function(item) {
        if (item && item.full_name) {
            return item.full_name;
        }
    },
    optionsSelect: {
        input: estimation,
        output: 'estimation',
        condition: {
            full_name:  'full_name'
        },
        options: estimations
    },
    value: estimation,
    optionsCaption: '...'">
</select>