Javascript 如何从Ember Power Select传递数据？

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

我有一个表单，它包含一个用于文本输入的余烬输入助手和用于从下拉列表中选择内容的组件

表单输入起作用，操作通过操作助手成功保存文本输入的值。但是，余烬能量选择不会发送任何值

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

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

哈佛商学院：

我错过了什么

---

谢谢你的帮助

这里的问题与余烬能量选择本身无关

在您的示例中，

{{city dropdown}

组件是隔离的。组件正在工作，但正在对该组件进行本地更改。它正在设置属性名

telaviv

的值（奇怪的名称，因为

telaviv

属性可能包含“耶路撒冷”字符串）

---

您应该将一些数据传递给该组件（

{{city dropdown city=city}}

），并让EPS在

onchange

操作中更改该值。

此处的问题与余烬能量选择本身无关

在您的示例中，

{{city dropdown}

组件是隔离的。组件正在工作，但正在对该组件进行本地更改。它正在设置属性名

telaviv

的值（奇怪的名称，因为

telaviv

属性可能包含“耶路撒冷”字符串）

---

您应该将一些数据传递给该组件（

{{city dropdown city=city}}

），并让EPS在

onchange

操作中更改该值。

创建者自己的回答！非常感谢。现在一切都很好。感谢您创建这个插件！实际上还有一个问题。我如何使该字段成为必需字段？来自创造者本人的回答！非常感谢。现在一切都很好。感谢您创建这个插件！实际上还有一个问题。如何使字段成为必填字段？

    <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>

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

      }
  }
});