jeudi 28 juillet 2016

Update belongsTo relationship via native select element

I have been trying to incorporate details of Brenna O'Brien's Ember Conf 2016 talk <select>ing Good Ember Patterns into a project and it is working for simple attributes (in the example below names is an array of strings and model.name is an attr( "string" )):

<select onchange=>
  
    <option value= selected=></option>
  
</select>

However, when this is applied to a belongsTo relationship and an array of models:

Controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  titles: null,
  init(){
    this.set( "titles", this.store.peekAll( "title" ) );
  }
});

Template:

<select onchange=>
  
    <option value= selected=>
      
    </option>
  
</select>

This fails; the relationship value is modified but it is not set to a valid title. From some analysis, it appears that the title model is stringified either when it is being handled by HTMLBars or when it is set as the option.value and this is not (cannot?) being converted back when the relationship is set.

I have currently solved it (Ember-Twiddle) by adding an action to the controller:

actions: {
  title( id ){
    this.set( 'model.title', this.store.peekRecord( "title", id ) );
  }
}

and modifying the template to call this:

<select onchange=>
  
    <option value= selected=>
      
    </option>
  
</select>

However, I then need to create a function for each relationship I want to update in this way.

Is there a way to directly set a belongsTo relationship from the template without calling an intermediate function or resorting to add-ons? (If not then is there a DRY method of solving this?)




Aucun commentaire:

Enregistrer un commentaire