Sign up ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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();
      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?

share|improve this question

migrated from Aug 12 '13 at 15:27

This question came from our site for professional programmers interested in conceptual questions about software development.

You might want to edit to ask about CoffeeScript since you aren't writing JavaScript at all. Client side techniques can be similar, but your title should match what you are asking. – bunglestink Aug 7 '13 at 14:28
It edited my question to include this info. I think best practices, on this subject, are the same with JS/CoffeeScript. – Dougui Aug 7 '13 at 14:32
Don't forget that Javascripters cannot read CoffeeScript but CoffeeScripters can read Javascript. – Esailija Aug 7 '13 at 15:03
@Esailija, I converted all the code using JS2Coffee – Dougui Aug 7 '13 at 15:16

1 Answer 1

up vote 1 down vote accepted

For a single form, this is the exact reason Knockout.js was created - tutorials here:

Angular is more of a full blown "SPA" framework, Knockout is data-binding for JavaScript with things like this:

share|improve this answer
I like your suggestion but.. I like unobstructive javascript. I use simple_form for rails and it's difficulte to customize the html generated. I will check deeper knockout to see it can make me happier than simple_form in the case. Thank! – Dougui Aug 20 '13 at 13:52
knockout is a great framework for complex forms and is easily integratable with rails or whatever you use which can generate html attributes. – Dougui Aug 21 '13 at 13:34

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.