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

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，无论是与自定义功能，或者使用内置工具的功率选择。

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

这可以正常工作，我可以创建任意数量的选择器，并按预期在正确的选项前端显示。

我应该如何保存用户选择的选项与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需要更新计算的属性，以便在用户添加或删除选定对象时前端呈现。这只是因为没有直接已知的数据库密钥而很尴尬。