如何从 Ember Power Select 传递数据

Question

我是Ember的初学者，所以我可能错过了一些非常简单的东西。

我有一个表单，其中包含用于文本输入的 Ember 输入助手和用于从下拉列表中选择内容的 Ember Power Select 组件。

表单输入有效，并且操作使用操作帮助程序成功保存文本输入中的值。但是，余烬电源选择不会发送任何值。

组件.hbs

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

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

所有表单组件都嵌套在另一个组件中。

哈佛商学院：

    <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

这里的问题与余烬电源选择本身无关。

在您的示例中，{{city-dropdown}}组件是隔离的。组件正在工作，但正在对该组件进行本地更改。它正在telaviv设置属性名称的值值（奇怪的名称，因为telaviv属性可能包含"耶路撒冷"字符串）。

您应该将一些数据传递给该组件（{{city-dropdown city=city}} ），并使 EPS 在onchange操作中更改该值。