How to dynamic form (add input) with backbone-forms...

[Student]

Please, can anyone suggest how best to implement the dynamic addition of fields depending on the selected item from the list?
When one of the elements of the drop-down list: 

Select[1] -> Input1, Input2, Input3
Select[2] -> Input1, Input2, Input3, Input4, Input5
Select[3] -> Input6, Input7, Input8

want to display multiple input fields... 

With native for (powmedia) backbone-forms validation & etc...

Thanks in advance!

[Charles Davison]

Have a look at this JSFiddle example:

http://jsfiddle.net/evilcelery/c5QHr/

--
You received this message because you are subscribed to the Google Groups "Backbone-forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to backbone-form...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Student]

ok...

I'm trying to solve this problem..
so
//init MODEL:

var selectedTextFields = Backbone.Model.extend({ 

     schema: { 

       Input1: { type: 'Text', title: 'Input1', validators: ['required']}, 

       Input2: { type: 'Text', title: 'Input2', validators: ['required']}, 

       Input3: { type: 'Text', title: 'Input3', validators: ['required']}

      }       

   });

 // MODEL with NestedModel  (DeepModel)...
 

 var appModel = Backbone.DeepModel.extend({ 

  schema: { 

   selType: { type: 'Select', title: 'Select Title',

    options: [

     {val: '0', label: ''}, 

     {val: '1', label: 'Select1'}, 

     {val: '2', label: 'Select2'}, 

     {val: '3', label: 'Select3'}

    ]}, 

   selTextFieldList: { type: 'NestedModel', model: selectedTextFields, 

    title: 'Selected Text Field Title'

   }

});

// init the FORM: 

     this.form = new Backbone.Form({ model: appModel, 

      template: _.template('<form id="'+this.uuidName+'-'+this.uuid+'" class="form-horizontal navbar-form bwf-form" data-fieldsets> </form>'),

      idPrefix: 'newproposal-'

     }); 

this.form.model.bind('change:schema.*', _.bind( function(model, val) {

    console.log("AddProposalFormView - CHANGE SCHEMA.... ")

  } , this) );

this.form.on('Select:change', function(form, selTypeEditor) { 

   var selectedTextFields2 = Backbone.Model.extend({ 

     schema: { 

       Input6: { type: 'Text', title: 'Input6', validators: ['required']}, 

       Input7: { type: 'Text', title: 'Input7', validators: ['required']}, 

       Input8: { type: 'Text', title: 'Input8', validators: ['required']}

      }       

   });

   var selTypeEditorVal = selTypeEditor.getValue();

   console.log("Select Item:["+selTypeEditorVal+"]");

   form.model.set("schema.selTextFieldList.model", selectedTextFields2);

 }); 


now when you change the drop down list is updated in the nested model scheme... 

How can I do correct ReInit & ReRendering of  hot changed FORM?

[Charles Davison]

For complex forms it's best to set the schema and logic on a custom Form (by doing Backbone.Form.extend).  It's a better place to keep all the logic rather than messing up your models.

You can call render() on the form again when necessary.

--

[Student]

I'm agree! 

But what if the server side there is only one validator,  that takes the entire form entirely. 
Do I understand correctly: 
Split complex form into several separate form? Update form views separately (using region)? 
Merge forms to one model when the user has finished editing all forms? 

Please, could you give an example...

понедельник, 30 июня 2014 г., 16:29:52 UTC+3 пользователь Charlie написал: