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需要更新計算的屬性，以便在用戶添加或刪除選定對象時前端呈現。這只是因爲沒有直接已知的數據庫密鑰而很尷尬。