Created
May 20, 2013 04:32
-
-
Save praveensewak/5610427 to your computer and use it in GitHub Desktop.
A collection of KockoutJs helpers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var windowURL = window.URL || window.webkitURL; | |
| ko.bindingHandlers.file = { | |
| init: function (element, valueAccessor) { | |
| $(element).change(function () { | |
| var file = this.files[0]; | |
| if (ko.isObservable(valueAccessor())) { | |
| valueAccessor()(file); | |
| } | |
| }); | |
| }, | |
| update: function (element, valueAccessor, allBindingsAccessor) { | |
| var file = ko.utils.unwrapObservable(valueAccessor()); | |
| var bindings = allBindingsAccessor(); | |
| if (bindings.fileObjectURL && ko.isObservable(bindings.fileObjectURL)) { | |
| var oldUrl = bindings.fileObjectURL(); | |
| if (oldUrl) { | |
| windowURL.revokeObjectURL(oldUrl); | |
| } | |
| bindings.fileObjectURL(file && windowURL.createObjectURL(file)); | |
| } | |
| if (bindings.fileBinaryData && ko.isObservable(bindings.fileBinaryData)) { | |
| if (!file) { | |
| bindings.fileBinaryData(null); | |
| } else { | |
| var reader = new FileReader(); | |
| reader.onload = function (e) { | |
| bindings.fileBinaryData(e.target.result); | |
| }; | |
| reader.readAsArrayBuffer(file); | |
| } | |
| } | |
| } | |
| }; | |
| //track an index on items in an observableArray | |
| ko.observableArray.fn.indexed = function (prop) { | |
| prop = prop || 'index'; | |
| //whenever the array changes, make one loop to update the index on each | |
| this.subscribe(function (newValue) { | |
| if (newValue) { | |
| var item; | |
| for (var i = 0, j = newValue.length; i < j; i++) { | |
| item = newValue[i]; | |
| if (!ko.isObservable(item[prop])) { | |
| item[prop] = ko.observable(); | |
| } | |
| item[prop](i); | |
| } | |
| } | |
| }); | |
| //initialize the index | |
| this.valueHasMutated(); | |
| return this; | |
| }; | |
| ko.bindingHandlers.flash = { | |
| init: function (element) { | |
| $(element).hide(); | |
| }, | |
| update: function (element, valueAccessor) { | |
| var value = ko.utils.unwrapObservable(valueAccessor()); | |
| if (value) { | |
| $(element).stop().hide().text(value).fadeIn(function () { | |
| clearTimeout($(element).data("timeout")); | |
| $(element).data("timeout", setTimeout(function () { | |
| $(element).fadeOut(); | |
| valueAccessor()(null); | |
| }, 3000)); | |
| }); | |
| } | |
| }, | |
| timeout: null | |
| }; | |
| ko.bindingHandlers.showModal = { | |
| init: function (element, valueAccessor) { | |
| }, | |
| update: function (element, valueAccessor) { | |
| var value = valueAccessor(); | |
| if (ko.utils.unwrapObservable(value)) { | |
| //$(element).modal('show'); | |
| $(element).modal({ | |
| show: true, | |
| backdrop: 'static', | |
| keyboard: false | |
| }); | |
| // this is to focus input field inside dialog | |
| $("input", element).focus(); | |
| } | |
| else { | |
| $(element).modal('hide'); | |
| } | |
| } | |
| }; | |
| ko.bindingHandlers.ckeditor = { | |
| init: function (element, valueAccessor, allBindingsAccessor, context) { | |
| var options = allBindingsAccessor().ckeditorOptions || {}; | |
| var modelValue = valueAccessor(); | |
| var value = ko.utils.unwrapObservable(valueAccessor()); | |
| $(element).html(value); | |
| $(element).ckeditor(); | |
| var editor = $(element).ckeditorGet(); | |
| //handle edits made in the editor | |
| editor.on('blur', function (e) { | |
| var self = this; | |
| if (ko.isWriteableObservable(self)) { | |
| self($(e.listenerData).val()); | |
| } | |
| }, modelValue, element); | |
| editor.on('keyup', function (e) { | |
| var self = this; | |
| if (ko.isWriteableObservable(self)) { | |
| self($(e.listenerData).val()); | |
| } | |
| }, modelValue, element); | |
| editor.on('change', function (e) { | |
| var self = this; | |
| if (ko.isWriteableObservable(self)) { | |
| self($(e.listenerData).val()); | |
| } | |
| }, modelValue, element); | |
| //handle destroying an editor (based on what jQuery plugin does) | |
| ko.utils.domNodeDisposal.addDisposeCallback(element, function () { | |
| var existingEditor = CKEDITOR.instances[element.name]; | |
| existingEditor.destroy(true); | |
| }); | |
| }, | |
| update: function (element, valueAccessor, allBindingsAccessor, context) { | |
| //handle programmatic updates to the observable | |
| var value = ko.utils.unwrapObservable(valueAccessor()); | |
| $(element).html(value); | |
| } | |
| }; | |
| // wrapper to an observable that requires accept/cancel | |
| ko.protectedObservable = function (initialValue) { | |
| // private variables | |
| var _actualValue = ko.observable(initialValue), | |
| _tempValue = initialValue; | |
| // computed observable that we will return | |
| var result = ko.computed({ | |
| // always return the actual value | |
| read: function () { | |
| return _actualValue(); | |
| }, | |
| // stored in a temporary spo until commit | |
| write: function (newValue) { | |
| _tempValue = newValue; | |
| } | |
| }); | |
| // if different, commit temp value | |
| result.commit = function () { | |
| if (_tempValue !== _actualValue()) { | |
| _actualValue(_tempValue); | |
| } | |
| }; | |
| // force subscribers to take original | |
| result.reset = function () { | |
| _actualValue.valueHasMutated(); | |
| _tempValue = _actualValue(); // reset temp value | |
| }; | |
| return result; | |
| }; | |
| // wrapper to an observable tha requires numeric input | |
| ko.numericObservable = function (initialValue) { | |
| var _actual = ko.observable(initialValue); | |
| var result = ko.dependentObservable({ | |
| read: function () { | |
| return _actual(); | |
| }, | |
| write: function (newValue) { | |
| var parsed = parseFloat(newValue); | |
| _actual(isNaN(parsed) ? newValue : parsed); | |
| } | |
| }); | |
| return result; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment