Emberjs Powerは動的なオプションとセレクタを選択します

Question

ここで使用する適切なパターンで少し苦労しています。 Iは、電源セレクタがselector呼ば表すモデル、各selector私は、各selectorをループし、それを実装dashboardItemモデルを有するselector

のオプションを構成するselectorOptionとhasManyを有するを有します。

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は、ユーザーが選択したオブジェクトを追加または削除するときにフロントエンドがレンダリングするように計算されたプロパティを更新する必要があります。これは、直接的に知られているデータベースキーがないために厄介なことです。