How do I pass data from Ember Power Select?

Question

I'm a beginner at Ember so I'm probably missing something very simple.

I have a form that contains a Ember input helpers for text input and Ember Power Select components for choosing things from a dropdown.

The form input works and the action successfully saves the values from the text inputs with an action helper. However, the Ember Power Selects don't send any values.

Component.hbs

 {{#power-select
    selected=telaviv
    class="form-dropdown"
    options=cities
    onchange=(action "chooseCity")
    as |city|}}
  {{city}}
{{/power-select}}

Component.js

import Ember from 'ember';

export default Ember.Component.extend({
    cities: ['Tel Aviv', 'Jerusalem', 'Haifa', 'Be\'er Sheva', 'Givat Shmuel'],
    telaviv: 'Tel Aviv',

    actions: {
      chooseCity(city) {
        this.set('telaviv', city);
        // this.calculateRoute();
        // this.updatePrice();
      }
    }
  });

All the form components are nested inside another component.

HBS:

    <div class="row">
  <div class="col-md-2"></div>
    <div class="new-date-form-container col-md-8">
      I took a date to a {{type-dropdown}}
      called
      {{input dropdownClass="slide-fade"
        type="text"
        class="form-textbox"
        placeholder="Place"
        value=place
        maxlength=30}}
      <br>
      <br>
      It was in
      {{city-dropdown}}
      <br>
      <br>
      and the date cost about
      {{price-dropdown}}
      I'd describe the place as
      {{atmosphere-dropdown}}
      so it works for
      {{input
        type="text"
        class="form-textbox"
        placeholder="Suitable for"
        value=suitablefor
        maxlength=20}}
      <br>
      <br>
      Here's an insider tip:
      {{input
        type="text"
        class="form-textbox"
        placeholder="Pro Tip"
        value=protip
        maxlength=70}}
      <br>
      <br>
      Their website is:
      {{input
        type="text"
        class="form-textbox"
        placeholder="Website"
        value=website}}
      <br>
      <br>
      It looks like this:
      {{input
        type="text"
        class="form-textbox"
        placeholder="Image"
        value=imageurl}}
      <br>
      <button {{action 'savedate' date}} class="submitbutton">Submit</button>
    </div>
  <div class="col-md-2"></div>
</div>

And its JS:

import Ember from 'ember';


export default Ember.Component.extend({
  store: Ember.inject.service(),
  actions: {
      savedate: function() {
          var newdate = this.get('store').createRecord('date', {
              imageurl: this.get('imageurl'),
              place: this.get('place'),
              type: this.get('type'),
              city: this.get('city'),
              price: this.get('price'),
              atmosphere: this.get('atmosphere'),
              suitablefor: this.get('suitablefor'),
              protip: this.get('protip'),
              website: this.get('website')
          });
var component = this;
          newdate.save().then(function() {
            alert('Date submission successful');
            component.setProperties({
                imageurl: '',
                place: '',
                type: '',
                city: '',
                price: '',
                atmosphere: '',
                suitablefor: '',
                protip: '',
                website: ''
            });
          }, function() {
            // handle error (show error message, retry, etc.)
            alert('Please try again');
          });

      }
  }
});

What am I missing?

Thanks for the help!

Answer 1

The problem here is not related to Ember Power Select itself.

In your example, the {{city-dropdown}} component is isolated. The component is working but is making local changes to that component. It is setting the value value of the property names telaviv (weird name since the telaviv property might contain the "Jerusalem" string).

You should pass some data to that component ({{city-dropdown city=city}}) and make EPS change that value in the onchange action.