在选择字段中动态设置Ember中的选择键 [英] Dynamically setting select key in Ember within select field

问题描述

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

  {
formFields：[
 {
 module：1，
fieldName：全局标题，
fieldPosition：1，
fieldType：select，
fieldEditable ：
dataTable：message，
dataKey：call_gt，
dataValue：id，
id：1，
createdAt：2015-10-15T13：59：30.764Z，
updatedAt：2015-10-15T13：59：30.764Z
} 
] 
} 
  

我有多个Ember组件。本质上是一个循环遍历与组件相关的字段的Add Parameter组件。下面是从数据库表中加载模型中传递的选择组件，以及用于 Key-> Value 的字段：

  {{#each model.fields as | field |}} 
 
 {{#if（eq field.fieldTypeselect）}} 
 {{form / select-field model = field.dataTable label = field.fieldName key = field.dataKey value = field.dataValue selected = 1}} 
 {{/ if}} 
 
 {{/ each}} 
  

select-field 组件然后生成一个选择，从添加参数组件中提供的值引出模型数据，如下所示：

 < div class =form-group> 
< label for ={{key}}> {{label}}< / label> 
 {{＃x-select value = optionValue action =selectOptionclass =form-controlid = 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 - >选项不持有该变量，我不知道如何将它传递到 x-option 值。

我的选择字段的组件.js如下所示：

从ember导入Ember

导出默认值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）;
}
}，
}）;有没有人知道如何使用密钥和值传递到<$ c $中的值来输出数据，


c> select-field 组件？

解决方案

听起来像你可能可以使用 get helper。 http://emberjs.com/api/classes/Ember.Templates.helpers .html＃method_get

  {{＃x-option value =（get option key）}} 
 {{get option key}} 
 {{/ x-option}} 
  

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?

解决方案

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

这篇关于在选择字段中动态设置Ember中的选择键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！