如何在Ember中创建带有静态项的下拉菜单

Question

我对JS/Ember非常陌生，并且能够创建一个静态下拉菜单，该菜单可以按需要工作，但是，我复制了包含模型和控制器中下拉项的静态对象数组，这违反了DRY。

有两条路由(索引和请求/新的)需要访问这个静态数组对象(reasonList)，它保存下拉项--一个有一个模型和控制器(请求)，另一个(索引)只有一个控制器。我的理解是控制器可以从模型中读取，反之亦然，因此模型似乎是这个静态数组对象的正确位置。我尝试了很多不同的方法来解决这个问题，但是没有一个成功，所以我只是问一下什么是正确的方法。

成员-cli版本: 3.15.1

节点版本: 10.18.0

成员-资料来源: 3.3.2

模型/request.js：

import { belongsTo } from 'ember-data/relationships';
import Model from 'ember-data/model';
import DS from 'ember-data';

export default Model.extend({
  // Properties
  reason_bucket: DS.attr('string'),
  reason: DS.attr('string'),
  approved_at: DS.attr('number'),

  reason_label: computed('reason_bucket', function() {
    let reasonList = [
      { value: "testDebug", label: "Test & Debug" },
      { value: "auditSupport", label: "Audit Support" },
      { value: "incidentResponse", label: "Incident Response / Case Support" }
    ]

    return reasonList.findBy('value', get(this, 'reason_bucket')).label;
  }), // snip

控制器/请求/new.js：

import lookupValidator from 'ember-changeset-validations';
import Changeset from 'ember-changeset';
import {computed, get, set} from '@ember/object';
import Controller from '@ember/controller';
import SearchAccountsMixin from '../../mixins/search-accounts';

export default Controller.extend(SearchAccountsMixin, {
  init() {
    this._super(...arguments);
    this.clear();
    this.reasonList = [
      { value: "testDebug", label: "Test & Debug" },
      { value: "auditSupport", label: "Audit Support" },
      { value: "incidentResponse", label: "Incident Response / Case Support" },
    ];
  },

  clear() {
      set(this, 'reason_bucket', null);
  },

  selectedReason: computed('reason_bucket', function(){
    return this.get('reasonList').findBy('value', this.get('reason_bucket'));
  }),

  actions: {
    setSelectedReason(selectedVal){
      this.set('reason_bucket', selectedVal.value);
      get(this, 'changeset').set('reason_bucket', selectedVal.value);
    }, // snip

    submit(changeset) {
      changeset.validate().then(() => {
        if (changeset.get('isValid')) {
          changeset.save().then(() => {
            this.transitionToRoute('index')
          })
        }
      })
    }
  },

  // Computed properties
  changeset: computed('model', function () {
    return new Changeset(get(this, 'model').request, lookupValidator(AccessRequestValidator), AccessRequestValidator, {skipValidate: true});
  }), // snip

模板/请求/新.：

<div class="omitted">
    {{#power-select
      options=reasonList
      searchField="label"
      placeholder="Select a Reason for Access"
      selected=selectedReason
      onchange=(action 'setSelectedReason')
    as |reason_bucket|
  }}
    {{reason_bucket.label}}
  {{/power-select}}
  {{group.errorsList}}
</div>

模板/索引.：

<div>
  <div class="b">Reason </div>
  <div>{{request.reason_label}}</div>
</div>
<div>
  <div class="b">Reason Detail </div>
  <div>{{request.reason}}</div>
</div>

Answer 1

如果你想做的是把你的列表干完，然后为它找到一个好的家，我建议把你的数组(可能的搜索功能放在一个utils文件中--这个文件不存在，但是你可以创建和导入它)。然后你就可以做这样的事情：

// app/utils/reasonList.js
export const reasonList = [];


import { reasonList } from ‘appName/utils/reasonList’;

selectedReason: computed('reason_bucket', function(){
return reasonList.findBy('value', this.get('reason_bucket'));
  }),