如何通過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}} ），並在onchange操作中使EPS更改該值。