diff --git a/backbone.modelbinding.js b/backbone.modelbinding.js index 714e941..8106e19 100644 --- a/backbone.modelbinding.js +++ b/backbone.modelbinding.js @@ -47,40 +47,40 @@ Backbone.ModelBinding = (function(){ return { version: "0.1.2", - getBindingAttribute: function(type){return config[type];}, - - configureCall: function(options){ - if (options != null) { - for (var type in config){ - if (!options[type + 'Attribute']) { - options[type + 'Attribute'] = config[type]; - } - } - this.options = options; - this.is_configured = true; - } - }, - - configure: function(options){ - if (options != null) { - for (var type in config) { - config[type] = options[type + 'Attribute'] ? - options[type + 'Attribute'] : config[type]; - } - } - }, - - resetCallConfiguration: function(){ - this.options = null; - this.is_configured = false; - }, - + getBindingAttribute: function(type){ return config[type]; }, + + configureCall: function(options){ + if (options != null) { + for (var type in config){ + if (!options[type + 'Attribute']) { + options[type + 'Attribute'] = config[type]; + } + } + this.options = options; + this.is_configured = true; + } + }, + + configure: function(options){ + if (options != null) { + for (var type in config) { + config[type] = options[type + 'Attribute'] ? + options[type + 'Attribute'] : config[type]; + } + } + }, + + resetCallConfiguration: function(){ + this.options = null; + this.is_configured = false; + }, + call: function(view, options){ - this.configureCall(options); - handleFormBindings(view, view.model); + this.configureCall(options); + handleFormBindings(view, view.model); handleHtmlBindings(view, view.model); handleConventionBindings(view, view.model); - this.resetCallConfiguration(); + this.resetCallConfiguration(); } } })(); @@ -93,7 +93,7 @@ Backbone.ModelBinding.Conventions = (function(){ bind: function(selector, view, model){ view.$(selector).each(function(index){ var element = view.$(this); - var field = getBindingValue(element, 'standard'); + var field = getBindingValue(element, 'standard'); Backbone.ModelBinding.HelperMethods.bidirectionalBinding.call(view, field, element, model); }); } @@ -115,10 +115,10 @@ Backbone.ModelBinding.Conventions = (function(){ var foundElements = []; view.$(selector).each(function(index){ var element = view.$(this); - var group_name = getBindingValue(element, 'radio'); + var group_name = getBindingValue(element, 'radio'); if (!foundElements[group_name]) { foundElements[group_name] = true; - var bindingAttr = getBindingAttr('radio'); + var bindingAttr = getBindingAttr('radio'); Backbone.ModelBinding.HelperMethods.bidirectionalRadioGroupBinding.call(view, group_name, model, bindingAttr); } }); @@ -130,20 +130,20 @@ Backbone.ModelBinding.Conventions = (function(){ var self = this; view.$(selector).each(function(index){ var element = view.$(this); - var field = getBindingValue(element, 'checkbox'); + var field = getBindingValue(element, 'checkbox'); Backbone.ModelBinding.HelperMethods.bidirectionalCheckboxBinding.call(view, field, element, model); }); } }; function getBindingAttr(type){ - return Backbone.ModelBinding.is_configured ? + return Backbone.ModelBinding.is_configured ? Backbone.ModelBinding.options[type + 'Attribute'] : Backbone.ModelBinding.getBindingAttribute(type); } function getBindingValue(element, type){ - var bindingAttr = getBindingAttr(type); - return element.attr(bindingAttr); + var bindingAttr = getBindingAttr(type); + return element.attr(bindingAttr); } return { @@ -162,116 +162,116 @@ Backbone.ModelBinding.Conventions = (function(){ // and non-conventional bindings // ---------------------------- Backbone.ModelBinding.HelperMethods = (function(){ + methods = {}; - return { - bidirectionalBinding: function(attribute_name, element, model){ - var self = this; + methods.bidirectionalBinding = function(attribute_name, element, model){ + var self = this; - // bind the model changes to the form elements - model.bind("change:" + attribute_name, function(changed_model, val){ - element.val(val); - }); + // bind the model changes to the form elements + model.bind("change:" + attribute_name, function(changed_model, val){ + element.val(val); + }); - // bind the form changes to the model - element.bind("change", function(ev){ - data = {}; - data[attribute_name] = self.$(ev.target).val(); - model.set(data); - }); + // bind the form changes to the model + element.bind("change", function(ev){ + data = {}; + data[attribute_name] = self.$(ev.target).val(); + model.set(data); + }); - // set the default value on the form, from the model - var attr_value = model.get(attribute_name); - if (attr_value) { - element.val(attr_value); - } - }, + // set the default value on the form, from the model + var attr_value = model.get(attribute_name); + if (attr_value) { + element.val(attr_value); + } + }, - bidirectionalSelectBinding: function(attribute_name, element, model){ - var self = this; + methods.bidirectionalSelectBinding = function(attribute_name, element, model){ + var self = this; - // bind the model changes to the form elements - model.bind("change:" + attribute_name, function(changed_model, val){ - element.val(val); - }); + // bind the model changes to the form elements + model.bind("change:" + attribute_name, function(changed_model, val){ + element.val(val); + }); - // bind the form changes to the model - element.bind("change", function(ev){ - data = {}; - data[attribute_name] = self.$(ev.target).val(); - data[attribute_name + "_text"] = self.$(":selected", ev.target).text(); - model.set(data); - }); + // bind the form changes to the model + element.bind("change", function(ev){ + data = {}; + data[attribute_name] = self.$(ev.target).val(); + data[attribute_name + "_text"] = self.$(":selected", ev.target).text(); + model.set(data); + }); - // set the default value on the form, from the model - var attr_value = model.get(attribute_name); - if (attr_value) { - element.val(attr_value); - } - }, - - bidirectionalRadioGroupBinding: function(group_name, model, bindingAttr){ - var self = this; + // set the default value on the form, from the model + var attr_value = model.get(attribute_name); + if (attr_value) { + element.val(attr_value); + } + }, - // bind the model changes to the form elements - model.bind("change:" + group_name, function(changed_model, val){ - var value_selector = "input[type=radio][" + bindingAttr + "=" + group_name + "][value=" + val + "]"; - self.$(value_selector).attr("checked", "checked"); - }); + methods.bidirectionalRadioGroupBinding = function(group_name, model, bindingAttr){ + var self = this; - // bind the form changes to the model - var group_selector = "input[type=radio][" + bindingAttr + "=" + group_name + "]"; - self.$(group_selector).bind("change", function(ev){ - var element = self.$(ev.currentTarget); - if (element.attr("checked")){ - data = {}; - data[group_name] = element.val(); - model.set(data); - } - }); + // bind the model changes to the form elements + model.bind("change:" + group_name, function(changed_model, val){ + var value_selector = "input[type=radio][" + bindingAttr + "=" + group_name + "][value=" + val + "]"; + self.$(value_selector).attr("checked", "checked"); + }); - // set the default value on the form, from the model - var attr_value = model.get(group_name); - if (attr_value) { - var value_selector = "input[type=radio][" + bindingAttr + "=" + group_name + "][value=" + attr_value + "]"; - self.$(value_selector).attr("checked", "checked"); + // bind the form changes to the model + var group_selector = "input[type=radio][" + bindingAttr + "=" + group_name + "]"; + self.$(group_selector).bind("change", function(ev){ + var element = self.$(ev.currentTarget); + if (element.attr("checked")){ + data = {}; + data[group_name] = element.val(); + model.set(data); } - }, + }); - bidirectionalCheckboxBinding: function(attribute_name, element, model){ - var self = this; + // set the default value on the form, from the model + var attr_value = model.get(group_name); + if (attr_value) { + var value_selector = "input[type=radio][" + bindingAttr + "=" + group_name + "][value=" + attr_value + "]"; + self.$(value_selector).attr("checked", "checked"); + } + }, - // bind the model changes to the form elements - model.bind("change:" + attribute_name, function(changed_model, val){ - if (val){ - element.attr("checked", "checked"); - } - else{ - element.removeAttr("checked"); - } - }); + methods.bidirectionalCheckboxBinding = function(attribute_name, element, model){ + var self = this; - // bind the form changes to the model - element.bind("change", function(ev){ - data = {}; - var changedElement = self.$(ev.target); - var checked = changedElement.attr("checked")? true : false; - data[attribute_name] = checked; - model.set(data); - }); + // bind the model changes to the form elements + model.bind("change:" + attribute_name, function(changed_model, val){ + if (val){ + element.attr("checked", "checked"); + } + else{ + element.removeAttr("checked"); + } + }); - // set the default value on the form, from the model - var attr_exists = model.attributes.hasOwnProperty(attribute_name); - if (attr_exists) { - var attr_value = model.get(attribute_name); - if (attr_value){ - element.attr("checked", "checked"); - } - else{ - element.removeAttr("checked"); - } + // bind the form changes to the model + element.bind("change", function(ev){ + data = {}; + var changedElement = self.$(ev.target); + var checked = changedElement.attr("checked")? true : false; + data[attribute_name] = checked; + model.set(data); + }); + + // set the default value on the form, from the model + var attr_exists = model.attributes.hasOwnProperty(attribute_name); + if (attr_exists) { + var attr_value = model.get(attribute_name); + if (attr_value){ + element.attr("checked", "checked"); } - }, + else{ + element.removeAttr("checked"); + } + } } + return methods; })(); diff --git a/spec/javascripts/configurableBindingAttributes.spec.js b/spec/javascripts/configurableBindingAttributes.spec.js index 591b588..56742cb 100644 --- a/spec/javascripts/configurableBindingAttributes.spec.js +++ b/spec/javascripts/configurableBindingAttributes.spec.js @@ -1,13 +1,15 @@ describe("configurableBindingAttributes", function(){ beforeEach(function(){ - this.model = new AModel({ - super_power: "mega pooping", - education: "graduate", - graduated: "maybe", - drivers_license: true - }); - this.view = new AnotherView({model: this.model}); - this.view.render(); + + this.model = new AModel({ + super_power: "mega pooping", + education: "graduate", + graduated: "maybe", + drivers_license: true + }); + + this.view = new AnotherView({model: this.model}); + this.view.render(); }); describe("text element binding using configurable attribute", function(){ @@ -113,4 +115,4 @@ describe("configurableBindingAttributes", function(){ expect(selected).toBeTruthy(); }); }); -}); \ No newline at end of file +}); diff --git a/spec/javascripts/helpers/sample.backbone.app.js b/spec/javascripts/helpers/sample.backbone.app.js index f50d46d..d797c44 100644 --- a/spec/javascripts/helpers/sample.backbone.app.js +++ b/spec/javascripts/helpers/sample.backbone.app.js @@ -57,12 +57,15 @@ AnotherView = Backbone.View.extend({ \ \ "); + this.$(this.el).append(html); - Backbone.ModelBinding.call(this, { - standardAttribute: 'class', - radioAttribute: 'class', - selectAttribute: 'class', - checkboxAttribute: 'class', - }); + + Backbone.ModelBinding.call(this, { + standardAttribute: 'class', + radioAttribute: 'class', + selectAttribute: 'class', + checkboxAttribute: 'class', + }); + }, });