如何從Ember Power Select傳遞數據？

Question

我是Ember的初學者，所以我可能錯過了一些非常簡單的東西。

我有一個表單，其中包含用於文本輸入的Ember輸入助手和用於從下拉列表中選擇內容的Ember Power Select組件。

表單輸入的工作原理和操作成功地使用動作助手保存文本輸入的值。但是Ember Power Selects不會發送任何值。

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

所有形式的部件嵌套在另一個組件內。

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> 

而且它的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'); 
      }); 

     } 
    } 
}); 

我缺少什麼？

感謝您的幫助！

Answer 1

這裏的問題與Ember Power Select本身無關。

在您的示例中，{{city-dropdown}}組件是隔離的。該組件正在工作，但正在對該組件進行本地更改。它設置屬性名稱telaviv（奇怪的名稱，因爲telaviv屬性可能包含「耶路撒冷」字符串）的值的值。

您應該將某些數據傳遞給該組件（{{city-dropdown city=city}}），並使EPS更改onchange操作中的該值。