在选择字段内动态设置Ember中的选择键

时间:2015-10-21 08:18:26

标签: ember.js ember-data ember-cli

所以我有一个从数据库生成表单的API。字段的API返回:

{
  "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"
    }
  ]
}

我有多个Ember组件。本质上是一个Add Parameter组件,它循环遍历与组件相关的字段。下面是从数据库表中加载传递模型的select组件以及用于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}}

select-field组件然后生成一个select,它从Add Parameter组件中提供的值中显示Model数据,如下所示:

<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>

但正如您所见,在x-option中,我目前正在对这些值进行硬编码,他们应该使用key=field.dataKey。但是当我循环播放并且componentModel -> Options没有保留该变量时,我不确定如何将其传递到x-option值。

select-field的my component.js看起来像这样,如果它有帮助:

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);
    }
  },
});

是否有人知道如何使用传递到select-field组件的键和值来显示数据?

1 个答案:

答案 0 :(得分:3)

听起来您可以使用get帮助器。 http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_get

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