{"version":3,"file":"kendo.binder.min.js","sources":["kendo.binder.js"],"sourcesContent":["(function(f, define) {\n define('kendo.binder',[ \"kendo.core\", \"kendo.data\" ], f);\n})(function() {\n\nvar __meta__ = {\n id: \"binder\",\n name: \"MVVM\",\n category: \"framework\",\n description: \"Model View ViewModel (MVVM) is a design pattern which helps developers separate the Model (the data) from the View (the UI).\",\n depends: [ \"core\", \"data\" ]\n};\n\n\n(function($, undefined) {\n var kendo = window.kendo,\n Observable = kendo.Observable,\n ObservableObject = kendo.data.ObservableObject,\n ObservableArray = kendo.data.ObservableArray,\n toString = {}.toString,\n binders = {},\n Class = kendo.Class,\n VALUE = \"value\",\n SOURCE = \"source\",\n EVENTS = \"events\",\n CHECKED = \"checked\",\n CSS = \"css\",\n deleteExpando = true,\n FUNCTION = \"function\",\n CHANGE = \"change\";\n\n (function() {\n var a = document.createElement(\"a\");\n\n try {\n delete a.test;\n } catch (e) {\n deleteExpando = false;\n }\n })();\n\n var Binding = Observable.extend( {\n init: function(parents, path) {\n var that = this;\n\n Observable.fn.init.call(that);\n\n that.source = parents[0];\n that.parents = parents;\n that.path = path;\n that.dependencies = {};\n that.dependencies[path] = true;\n that.observable = that.source instanceof Observable;\n\n that._access = function(e) {\n that.dependencies[e.field] = true;\n };\n\n if (that.observable) {\n that._change = function(e) {\n that.change(e);\n };\n\n that.source.bind(CHANGE, that._change);\n }\n },\n\n _parents: function() {\n var parents = this.parents;\n var value = this.get();\n\n if (value && typeof value.parent == \"function\") {\n var parent = value.parent();\n\n if ($.inArray(parent, parents) < 0) {\n parents = [parent].concat(parents);\n }\n }\n\n return parents;\n },\n\n change: function(e) {\n var dependency,\n ch,\n field = e.field,\n that = this;\n\n if (that.path === \"this\") {\n that.trigger(CHANGE, e);\n } else {\n for (dependency in that.dependencies) {\n if (dependency.indexOf(field) === 0) {\n ch = dependency.charAt(field.length);\n\n if (!ch || ch === \".\" || ch === \"[\") {\n that.trigger(CHANGE, e);\n break;\n }\n }\n }\n }\n },\n\n start: function(source) {\n source.bind(\"get\", this._access);\n },\n\n stop: function(source) {\n source.unbind(\"get\", this._access);\n },\n\n get: function() {\n\n var that = this,\n source = that.source,\n index = 0,\n path = that.path,\n result = source;\n\n if (!that.observable) {\n return result;\n }\n\n that.start(that.source);\n\n result = source.get(path);\n\n // Traverse the observable hierarchy if the binding is not resolved at the current level.\n while (result === undefined && source) {\n\n source = that.parents[++index];\n\n if (source instanceof ObservableObject) {\n result = source.get(path);\n }\n }\n\n // second pass try to get the parent from the object hierarchy\n if (result === undefined) {\n source = that.source; //get the initial source\n\n while (result === undefined && source) {\n source = source.parent();\n\n if (source instanceof ObservableObject) {\n result = source.get(path);\n }\n }\n }\n\n // If the result is a function - invoke it\n if (typeof result === \"function\") {\n index = path.lastIndexOf(\".\");\n\n // If the function is a member of a nested observable object make that nested observable the context (this) of the function\n if (index > 0) {\n source = source.get(path.substring(0, index));\n }\n\n // Invoke the function\n that.start(source);\n\n if (source !== that.source) {\n result = result.call(source, that.source);\n } else {\n result = result.call(source);\n }\n\n that.stop(source);\n }\n\n // If the binding is resolved by a parent object\n if (source && source !== that.source) {\n\n that.currentSource = source; // save parent object\n\n // Listen for changes in the parent object\n source.unbind(CHANGE, that._change)\n .bind(CHANGE, that._change);\n }\n\n that.stop(that.source);\n\n return result;\n },\n\n set: function(value) {\n var source = this.currentSource || this.source;\n\n var field = kendo.getter(this.path)(source);\n\n if (typeof field === \"function\") {\n if (source !== this.source) {\n field.call(source, this.source, value);\n } else {\n field.call(source, value);\n }\n } else {\n source.set(this.path, value);\n }\n },\n\n destroy: function() {\n if (this.observable) {\n this.source.unbind(CHANGE, this._change);\n if (this.currentSource) {\n this.currentSource.unbind(CHANGE, this._change);\n }\n }\n\n this.unbind();\n }\n });\n\n var EventBinding = Binding.extend( {\n get: function() {\n var source = this.source,\n path = this.path,\n index = 0,\n handler;\n\n handler = source.get(path);\n\n while (!handler && source) {\n source = this.parents[++index];\n\n if (source instanceof ObservableObject) {\n handler = source.get(path);\n }\n }\n\n if (!handler) {\n return;\n }\n\n return handler.bind(source);\n }\n });\n\n var TemplateBinding = Binding.extend( {\n init: function(source, path, template) {\n var that = this;\n\n Binding.fn.init.call(that, source, path);\n\n that.template = template;\n },\n\n render: function(value) {\n var html;\n\n this.start(this.source);\n\n html = kendo.render(this.template, value);\n\n this.stop(this.source);\n\n return html;\n }\n });\n\n var Binder = Class.extend({\n init: function(element, bindings, options) {\n this.element = element;\n this.bindings = bindings;\n this.options = options;\n },\n\n bind: function(binding, attribute) {\n var that = this;\n\n binding = attribute ? binding[attribute] : binding;\n\n binding.bind(CHANGE, function(e) {\n that.refresh(attribute || e);\n });\n\n that.refresh(attribute);\n },\n\n destroy: function() {\n }\n });\n\n var TypedBinder = Binder.extend({\n dataType: function() {\n var dataType = this.element.getAttribute(\"data-\" + kendo.ns + \"type\") || this.element.type || \"text\";\n return dataType.toLowerCase();\n },\n\n parsedValue: function() {\n return this._parseValue(this.element.value, this.dataType());\n },\n\n _parseValue: function(value, dataType) {\n if (dataType == \"date\") {\n value = kendo.parseDate(value, \"yyyy-MM-dd\");\n } else if (dataType == \"datetime-local\") {\n value = kendo.parseDate(value, [\"yyyy-MM-ddTHH:mm:ss\", \"yyyy-MM-ddTHH:mm\"] );\n } else if (dataType == \"number\") {\n value = kendo.parseFloat(value);\n } else if (dataType == \"boolean\") {\n value = value.toLowerCase();\n if (kendo.parseFloat(value) !== null) {\n value = Boolean(kendo.parseFloat(value));\n } else {\n value = (value.toLowerCase() === \"true\");\n }\n }\n return value;\n }\n });\n\n binders.attr = Binder.extend({\n refresh: function(key) {\n this.element.setAttribute(key, this.bindings.attr[key].get());\n }\n });\n\n binders.css = Binder.extend({\n init: function(element, bindings, options) {\n Binder.fn.init.call(this, element, bindings, options);\n this.classes = {};\n },\n refresh: function(className) {\n var element = $(this.element),\n binding = this.bindings.css[className],\n hasClass = this.classes[className] = binding.get();\n if (hasClass) {\n element.addClass(className);\n } else {\n element.removeClass(className);\n }\n }\n });\n\n binders.style = Binder.extend({\n refresh: function(key) {\n this.element.style[key] = this.bindings.style[key].get() || \"\";\n }\n });\n\n binders.enabled = Binder.extend({\n refresh: function() {\n if (this.bindings.enabled.get()) {\n this.element.removeAttribute(\"disabled\");\n } else {\n this.element.setAttribute(\"disabled\", \"disabled\");\n }\n }\n });\n\n binders.readonly = Binder.extend({\n refresh: function() {\n if (this.bindings.readonly.get()) {\n this.element.setAttribute(\"readonly\", \"readonly\");\n } else {\n this.element.removeAttribute(\"readonly\");\n }\n }\n });\n\n binders.disabled = Binder.extend({\n refresh: function() {\n if (this.bindings.disabled.get()) {\n this.element.setAttribute(\"disabled\", \"disabled\");\n } else {\n this.element.removeAttribute(\"disabled\");\n }\n }\n });\n\n binders.events = Binder.extend({\n init: function(element, bindings, options) {\n Binder.fn.init.call(this, element, bindings, options);\n this.handlers = {};\n },\n\n refresh: function(key) {\n var element = $(this.element),\n binding = this.bindings.events[key],\n handler = this.handlers[key];\n\n if (handler) {\n element.off(key, handler);\n }\n\n handler = this.handlers[key] = binding.get();\n\n element.on(key, binding.source, handler);\n },\n\n destroy: function() {\n var element = $(this.element),\n handler;\n\n for (handler in this.handlers) {\n element.off(handler, this.handlers[handler]);\n }\n }\n });\n\n binders.text = Binder.extend({\n refresh: function() {\n var text = this.bindings.text.get();\n var dataFormat = this.element.getAttribute(\"data-\" + kendo.ns + \"format\") || \"\";\n if (text == null) {\n text = \"\";\n }\n\n $(this.element).text(kendo.toString(text, dataFormat));\n }\n });\n\n binders.visible = Binder.extend({\n refresh: function() {\n if (this.bindings.visible.get()) {\n this.element.style.display = \"\";\n } else {\n this.element.style.display = \"none\";\n }\n }\n });\n\n binders.invisible = Binder.extend({\n refresh: function() {\n if (!this.bindings.invisible.get()) {\n this.element.style.display = \"\";\n } else {\n this.element.style.display = \"none\";\n }\n }\n });\n\n binders.html = Binder.extend({\n refresh: function() {\n this.element.innerHTML = this.bindings.html.get();\n }\n });\n\n binders.value = TypedBinder.extend({\n init: function(element, bindings, options) {\n TypedBinder.fn.init.call(this, element, bindings, options);\n\n this._change = this.change.bind(this);\n this.eventName = options.valueUpdate || CHANGE;\n\n $(this.element).on(this.eventName, this._change);\n\n this._initChange = false;\n },\n\n change: function() {\n this._initChange = this.eventName != CHANGE;\n\n this.bindings[VALUE].set(this.parsedValue());\n\n this._initChange = false;\n },\n\n refresh: function() {\n if (!this._initChange) {\n var value = this.bindings[VALUE].get();\n\n if (value == null) {\n value = \"\";\n }\n\n var type = this.dataType();\n\n if (type == \"date\") {\n value = kendo.toString(value, \"yyyy-MM-dd\");\n } else if (type == \"datetime-local\") {\n value = kendo.toString(value, \"yyyy-MM-ddTHH:mm:ss\");\n }\n\n this.element.value = value;\n }\n\n this._initChange = false;\n },\n\n destroy: function() {\n $(this.element).off(this.eventName, this._change);\n }\n });\n\n binders.source = Binder.extend({\n init: function(element, bindings, options) {\n Binder.fn.init.call(this, element, bindings, options);\n\n var source = this.bindings.source.get();\n\n if (source instanceof kendo.data.DataSource && options.autoBind !== false) {\n source.fetch();\n }\n },\n\n refresh: function(e) {\n var that = this,\n source = that.bindings.source.get();\n\n if (source instanceof ObservableArray || source instanceof kendo.data.DataSource) {\n e = e || {};\n\n if (e.action == \"add\") {\n that.add(e.index, e.items);\n } else if (e.action == \"remove\") {\n that.remove(e.index, e.items);\n } else if (e.action != \"itemchange\") {\n that.render();\n }\n } else {\n that.render();\n }\n },\n\n container: function() {\n var element = this.element;\n\n if (element.nodeName.toLowerCase() == \"table\") {\n if (!element.tBodies[0]) {\n element.appendChild(document.createElement(\"tbody\"));\n }\n element = element.tBodies[0];\n }\n\n return element;\n },\n\n template: function() {\n var options = this.options,\n template = options.template,\n nodeName = this.container().nodeName.toLowerCase();\n\n if (!template) {\n if (nodeName == \"select\") {\n if (options.valueField || options.textField) {\n template = kendo.format('',\n options.valueField || options.textField, options.textField || options.valueField);\n } else {\n template = \"\";\n }\n } else if (nodeName == \"tbody\") {\n template = \"