In a Rails application, I want to have a complex form with some dynamic behaviour. For example, I want to show a part of the form want I check a box or I want to have different values in a select box when I choose a radio button.
I do this with JQuery. My problem concern the archirecture. I created a form object and I create a init method which init every behaviour of every components like this :
PaintingForm.prototype.init = function() {
var country_listener;
if ($('form.painting').size() === 1) {
this.form = $('form.painting').first();
this.initImageUploader();
this.initSubmit();
this.assignInputs();
this.initAutoComplete();
this.listenCategories();
country_listener = new CountryInputListener('#painting_country_id', '#painting_region_id');
return country_listener.init();
}
};
PaintingForm.prototype.initImageUploader = function() { //some code };
PaintingForm.prototype.initSubmit = function() { //some code };
PaintingForm.prototype.onSubmit = function() { //some code };
PaintingForm.prototype.assignInputs = function() { //some code };
PaintingForm.prototype.listenCategories = function() { //some code };
PaintingForm.prototype.onCategoryInputChange = function() { //some code };
PaintingForm.prototype.loadTechnics = function() { //some code };
PaintingForm.prototype.showDepthIfSculptureChoosen = function() { //some code };
PaintingForm.prototype.onLoadTechnicsSuccess = function() { //some code };
PaintingForm.prototype.initAutoComplete = function() { //some code };
I'm not satisfied. I think I can split the form like this :
PaintingForm.prototype.init = function() {
var country_listener;
if ($('form.painting').size() === 1) {
this.form = $('form.painting').first();
(new PaintingForm.Category).init()
(new PaintingForm.AutoComplete).init()
(new PaintingForm.Depth).init()
(new CountryInputListener('#painting_country_id', '#painting_region_id')).init();
}
};
//other behaviour for the form
this.PaintingForm.Category = (function() {
//Behaviour for categories
})();
this.PaintingForm.Depth = (function() {
//Behaviour for depth
})();
this.PaintingForm.AutoComplete = (function() {
//Behaviour for autocomplete
})();
It's better but I'm not sure. There is a lot of interactions between fields. Should I create one object for every fields? Is there a solution with a framework like or angular? Do you have correct examples?
