mardi 10 novembre 2015

Get dynamically generated field component values to parent controller

I call a component from within my template. The job of this component is to generate fields from a database table. I have values like field_name, field_data_table, field_key, field_value etc

These are put to the component via "content" i.e

{{module-add-parameter content=model create=(action "addParameters") value=fields}}

// components/module-add-parameter. This generates the form fields and outputs any required data i.e. select options.

<form {{action 'create' on='submit' }}>

        {{#each content.fields as |field|}}
             {{form-field type=field.field_type content=field.data_table label=field.field_name key=field.data_key value=field.data_value width=field.field_width saveTo=field.data_to_column placeholder=field.field_placeholder multiple=field.field_multiple}}
        {{/each}}


        <button type="submit" class="btn btn-primary">Add Parameter</button>

</form>

// components/form-field/template.hbs

{{#if (eq type "select")}}
  {{form-field/field-select content=content name=saveTo label=label key=key value=value width=width saveTo=saveTo multiple=multiple placeholder=placeholder}}
{{/if}}

{{#if (eq type "text")}}
  {{form-field/field-text content=content name=saveTo label=label key=key value=value width=width saveTo=saveTo multiple=multiple placeholder=placeholder}}
{{/if}}

// components/form-field/field-select/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  componentModel: function() {
    return this.store.findAll(this.get('content'));
  }.property(),

  actions: {
    componentQuery: function(query, deferred) {
      this.store.query(this.get('content'), { [this.get('key')]:    {contains:query.term}, limit:[this.get('setting.service.limit')]})
  .then(deferred.resolve, deferred.reject);
    }
  }
});

// components/form-field/field-select/template.hbs

  <label for="{{key}}">{{label}}</label>
  {{input type="hidden" name=saveTo value=selectedValue}}
  {{select-2 content=componentModel value=selectedValue optionLabelPath=key optionValuePath=value placeholder=placeholder multiple=multiple query="componentQuery"}}

I can't figure out how to pass the selected value back to my parent

At the same time, the fields are generated automatically via the database, so next I need to figure out a way to pass the values in an object, were I can do a foreach then save the values to the database.




Aucun commentaire:

Enregistrer un commentaire