Wie gebe ich Daten von Ember Power Select weiter?

Question

Ich bin ein Anfänger bei Ember, also vermisse ich wahrscheinlich etwas sehr einfaches.

Ich habe ein Formular, das eine Ember-Eingabehilfen für die Texteingabe und Ember Power Select Komponenten für die Auswahl der Dinge aus einem Dropdown enthält.

Die Formulareingabe funktioniert und die Aktion speichert die Werte erfolgreich mit einem Aktionshelfer aus den Texteingaben. Die Ember Power Selects senden jedoch keine Werte.

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

die alle Formularkomponenten sind im Inneren einer anderen Komponente verschachtelt.

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> 

Und seine 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'); 
      }); 

     } 
    } 
}); 

Was bin ich?

Danke für die Hilfe!

Answer 1

Das Problem hier bezieht sich nicht auf Ember Power Select selbst. In Ihrem Beispiel ist die Komponente {{city-dropdown}} isoliert. Die Komponente funktioniert, führt jedoch lokale Änderungen an dieser Komponente durch. Es setzt den Wert Wert der Eigenschaftsnamen telaviv (seltsamer Name, da die telaviv Eigenschaft die "Jerusalem" Zeichenfolge enthalten könnte).

Sie sollten einige Daten an diese Komponente übergeben ({{city-dropdown city=city}}) und veranlassen, dass EPS diesen Wert in der onchange Aktion ändert.