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

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

模板.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上做什么，无论是使用自定义功能还是使用内置的电源选择工具。

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

这可以正确地工作到我可以创建任意数量的选择器的地步，并且它们在前端显示出预期的正确选项。

我应该如何保存用户根据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}}

这允许有未知数量的"视觉"，以及未知数量的要加载和保存的"视觉对象"。

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