Best practices to do complex forms with javascript?
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 :
class @PaintingForm
init: ->
if $('form.painting').size() == 1
@form = $('form.painting').first()
@initImageUploader()
@initSubmit()
@assignInputs()
@initAutoComplete()
@listenCategories()
country_listener = new CountryInputListener('#painting_country_id',
'#painting_region_id')
country_listener.init()
initImageUploader: ->
#...
initSubmit: ->
#...
onSubmit: =>
#...
assignInputs: ->
#assign all inputs
listenCategories: ->
#...
onCategoryInputChange: (event) =>
#...
loadTechnics: ->
#...
showDepthIfSculptureChoosen: ->
#...
onLoadTechnicsSuccess: (data) =>
#...
initAutoComplete: ->
#...
I'm not satisfied. I think I can split the form like this :
class @PaintingForm
init: ->
if $('form.painting').size() == 1
@form = $('form.painting').first()
@initImageUploader()
@initSubmit()
@assignInputs()
@initAutoComplete()
@listenCategories()
country_listener = new CountryInputListener('#painting_country_id',
'#painting_region_id')
country_listener.init()
initImageUploader: ->
#...
initSubmit: ->
#...
onSubmit: =>
#...
assignInputs: ->
#assign all inputs
class @PaintingForm.Category
init: ->
#...
onCategoryInputChange: (event) =>
#...
class @PaintingForm.Category
init: ->
#...
onLoadTechnicsSuccess: (data) =>
#...
class @PaintingForm.Depth
init: ->
#...
showDepthIfSculptureChoosen: ->
#...
class @PaintingForm.AutoComplete
initAutoComplete: ->
#...
I think it's better but It can be better. So I think to do JQuery plugins
and init it like this :
$.fn.paintingForm= ->
@each ->
$(this).find('#painting_category_id').paintingCategoryId()
#...
$.fn.paintingCategoryId ->
#... the code for categories
It's better but I'm not sure. Is it the better solution? What are the best
practices? Is there some examples somewhere? I didn't found anything on
the internet.
No comments:
Post a Comment