Emberjs Power select 动态选项和 selector

Question

我对在这里使用的正确模式有点费劲。我有一个代表幂 select 或称为 selector 的模型，每个 selector 都有一个 hasMany 和 selectorOption 组成 [=14] 的选项=]

然后我有一个 dashboardItem 模型，它循环遍历每个 selector 并实现它。

route.js

export default Route.extend({

  model(params) {
    return RSVP.hash({
      dashboard: get(this, 'store').findRecord('dashboard', params.dashboard_id),
      selectors: get(this, 'store').findAll('selector'),
    });
  },

  setupController(controller, models) {
    controller.setProperties(models);
  },
});

template.hbs

{{#each selectors as |selector|}}
  <div class="column is-12 object-item">
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          {{selector.title}}
        </p>
      </header>
      <div class="card-content">
        {{#power-select-multiple
          placeholder="Vision"
          options=selector.selectorOptions
          searchEnabled=false
          onchange=(action 'something...') as |option|}}
          {{option.title}}
        {{/power-select-multiple}}
      </div>
    </div>
  </div>
{{/each}}

我不确定要在 onchange 上做什么，要么使用自定义函数，要么使用强大的内置工具-select。

每个 selector 都是一个多selector。

这可以正常工作，以至于我可以创建任意数量的 selector，并且它们会按预期在前端显示正确的选项。

我应该如何保存用户根据 dashboardItem 选择的选项？

这是数据库中显示模型及其关系的部分。请注意，目前 selector 和 dashboardItem 之间没有关系（也许应该有？）

{
  "selectorOptions" : {
    "-Kyc7on207d_IxnNw2iO" : {
      "title" : "Apple",
      "vision" : "-Kyc7nG9Bz3aEGLked8x"
    },
    "-Kyc7qC9_uxFgXP9c7hT" : {
      "title" : "Orange",
      "vision" : "-Kyc7nG9Bz3aEGLked8x"
    },
    "-Kyc7qqZPMikoG1r3r5g" : {
      "title" : "Bannana",
      "vision" : "-Kyc7nG9Bz3aEGLked8x"
    },
    "-Kyc7uZu8MTfUdH70cBR" : {
      "title" : "Blue",
      "vision" : "-Kyc7rtTPTMJxAPacg-L"
    },
    "-Kyc7vJC3ImzVOEraALx" : {
      "title" : "Green",
      "vision" : "-Kyc7rtTPTMJxAPacg-L"
    },
    "-Kyc7wCrqDz8CD_I-dYy" : {
      "title" : "Red",
      "vision" : "-Kyc7rtTPTMJxAPacg-L"
    }
  },
  "selectors" : {
    "-Kyc7nG9Bz3aEGLked8x" : {
      "title" : "Fruits",
      "selectorOptions" : {
        "-Kyc7on207d_IxnNw2iO" : true,
        "-Kyc7qC9_uxFgXP9c7hT" : true,
        "-Kyc7qqZPMikoG1r3r5g" : true
      }
    },
    "-Kyc7rtTPTMJxAPacg-L" : {
      "title" : "Colours ",
      "selectorOptions" : {
        "-Kyc7uZu8MTfUdH70cBR" : true,
        "-Kyc7vJC3ImzVOEraALx" : true,
        "-Kyc7wCrqDz8CD_I-dYy" : true
      }
    }
  }
}

Answer 1

解决方案是不要与基本数组存储对抗关系。

例如

基础

export default Model.extend({
  title: attr('string'),
  visionOptions: hasMany('vision-option'),
});

基地选项

export default Model.extend({
  title: attr('string'),
  vision: belongsTo('vision'),
});

保存 selected 对象的模型

export default Model.extend({
  //...
  visionOptions: hasMany('vision-option', {async: true}),
  //...
});

处理保存的组件，select生成正确的对象

export default Component.extend({

  tagName: "",
  classNames: "",

  selectedVisions: computed('dashboardItem.visionOptions', function () {
    const visionId = this.get('vision.id');
    const options = this.get('dashboardItem.visionOptions');

    return options.filterBy('vision.id', visionId);
  }),

  actions: {
    addVision(newList) {
      let dashboardItem = get(this, 'dashboardItem');
      let options = get(this, 'selectedVisions');

      options.forEach(function (me) {
        if (!newList.includes(me)) {
          dashboardItem.get('visionOptions').removeObject(me);
        }
      });

      newList.forEach(function (me) {
        if (!options.includes(me)) {
          dashboardItem.get('visionOptions').pushObject(me);
        }
      });

      dashboardItem.save().then(() => {
        dashboardItem.notifyPropertyChange('visionOptions')
      });
    }
  }

});

模板渲染能力-select

  {{#power-select-multiple
    placeholder=""
    options=vision.visionOptions
    searchEnabled=false
    selected=selectedVisions
    onchange=(action 'addVision') as |vision|}}
    {{vision.title}}
  {{/power-select-multiple}}

这允许加载和保存未知数量的 "visions"，以及未知数量的 "visionObjects"。

需要 notifyPropertyChange 来更新计算的属性，以便在用户添加或删除 selected 对象时呈现前端。这很尴尬，因为没有直接已知的数据库密钥。

Emberjs Power select 动态选项和 selector

Emberjs Power select dynamic options and selectors

ember.js

ember-data