Question

我正在努力使用这里使用的正确模式。我有一个代表名为selector的幂选择器的模型，每个selector都有hasMany selectorOption，它构成了selector

然后我有一个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上做什么，无论是使用自定义功能还是使用内置的power-select工具。

每个选择器都是一个多选择器。

这是正确的，我可以创建任意数量的选择器，它们在前端显示正确的选项。

如何保存用户针对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'),
});

保存所选对象的模型

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

处理保存并选择正确对象的组件

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

});

用于渲染电源选择的模板

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

这允许存在未知数量的＆＃34;视觉＆＃34;，具有未知数量的＆＃34; visionObjects＆＃34;加载和保存。

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

Emberjs Power选择动态选项和选择器

1 个答案: