CODEWITHSUNDEEP
ember.jsember-dataember-cli
Ian Jamieson
Ian Jamieson

Reputation: 169

Dynamically setting select key in Ember within select field

So I have an API that generates forms from a database. The API for the fields returns:

{
  "formFields": [
    {
      "module": 1,
      "fieldName": "Global Title",
      "fieldPosition": "1",
      "fieldType": "select",
      "fieldEditable": true,
      "dataTable": "message",
      "dataKey": "calling_gt",
      "dataValue": "id",
      "id": 1,
      "createdAt": "2015-10-15T13:59:30.764Z",
      "updatedAt": "2015-10-15T13:59:30.764Z"
    }
  ]
}

I have multiple Ember components. Essentially an Add Parameter component that loops through the fields related to the component. Below is loading the select component passing in the Model from the database table and the fields to use for the Key->Value:

  {{#each model.fields as |field|}}

      {{#if (eq field.fieldType "select")}}
          {{form/select-field model=field.dataTable label=field.fieldName key=field.dataKey value=field.dataValue selected=1}}
      {{/if}}

  {{/each}}

The select-field component then generates a select that brings out the Model data from the values provided in the Add Parameter component, like so:

<div class="form-group">
  <label for="{{key}}">{{label}}</label>
  {{#x-select value=optionValue action="selectOption" class="form-control" id=key}}
    {{#each componentModel as |option|}}
      {{#x-option value=option.calling_gt}}{{option.calling_gt}}{{/x-option}}
    {{/each}}
  {{/x-select}}
</div>

But as you can see, in x-option, I'm currently hard-coding the values, where they should be using the key=field.dataKey. But as I'm looping through and my componentModel -> Options don't hold that variable, I'm not sure how to pass it into the x-option value.

My component.js for select-field looks like this, if it helps:

import Ember from 'ember';

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

  actions: {
    selectOption(value, component) {
      Ember.Logger.debug("Option " + component + " with value " + value + "     selected");
      this.set('optionValue', value);
    }
  },
});

Does anyone know how to bring out the data using the key and value passed into the select-field component?

Upvotes: 1

Views: 679

Answers (1)

kmiyashiro
kmiyashiro

Reputation: 2249

Sounds like you might be able to use the get helper. http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_get

{{#x-option value=(get option key)}}
  {{get option key}}
{{/x-option}}

Upvotes: 3

Related Questions