mardi 23 février 2016

Ember: Adding observers dynamically to a dynamic form

i am new to ember. I have created a dynamic form in which i have to add fields as specified by the data from the server. So in the same template the same form may have different components for different requests. What i need to do next is add observers to these fields. I have written a mixin to do this but its not working. The console doesn't show any errors either. Any help will be appreciated.

//mixin code
import Ember from 'ember';

export default Ember.Mixin.create({
        methodsToDefine: [],
        init: function() {
                this._super();
                var MTD = this.get('methodsToDefine');
                MTD.forEach(function(config) {
                        // add an observer for checkerName - a change should call methodToCall
                        console.log("inside mixin");
                        Ember.addObserver(this, config, this, "changeObserved");
                }, this);
        },

        /*
        willDestroy: function() {
                this._super();
                var MTD = this.get('methodsToDefine');
                // since we are good citizens, we remove the observers when the object is destroyed
                MTD.forEach(function(config) {
                        Ember.removeObserver(this, config, this, "changeObserved");
                }, this);
        }
        */
});



//from th mixin i am simply calling this function from the controller
changeObserved: function() {
      alert("hi");
   }


//from the controller i am also setting an array of field values that have to be //observerd as the array methodsToDefine
               var temp = [];
               temp=self.get('methodsToDefine');
               temp.push(wizardStepFields.wizardStepFieldData.value);
               self.set('methodsToDefine',temp);
               
 {{#bs-form formLayout="horizontal" model=this action="submit"}} 
                    {{#each wizardData.wizardSteps as |wizardSteps|}}
                    <section>
                        <h4>{{wizardSteps.stepLabel}}</h4> 
                        {{#each wizardSteps.wizardStepFieldSets as |wizardStepFieldSets|}}
                        <article>
                            <h5>{{wizardStepFieldSets.fieldSetLabel}}</h5> 
                            {{#each wizardStepFieldSets.wizardStepFields as |wizardStepFields|}} 
                                    {{#component "bs-form-element" controlType=wizardStepFields.fieldType label=wizardStepFields.fieldLabel placeholder=wizardStepFields.fieldLabel name=wizardStepFields.fieldLabel value=wizardStepFields.wizardStepFieldData.value defaultText=wizardStepFields.defaultValue type=wizardStepFields.fieldType property=wizardStepFields.fieldLabel}} 
                                    {{/component}}
                            {{/each}}
                        </article>
                        {{/each}}
                    </section>
                    {{/each}}
                    <footer>
                        <button id="form-wizard-submit" class="btn btn-default" type="submit">Submit</button>
                    </footer>
                {{/bs-form}} 



Aucun commentaire:

Enregistrer un commentaire