javascript - 如何与某些 Controller 通信组件中的表单输入值？

Question

我在 EmberComponent 中有这个简单的形式:

<script type="text/x-handlebars" id="components/booking-box">
 <form>
  <label for="name"> First Name </label>
  <input id="name" type="text" />

  <input type="submit" value="Send" {{action 'send' }}/>
 </form>
</script>

我有 JS:

SiteApp.BookingBoxComponent = Ember.Component.extend({
 actions: {
   send: function() {
     // crazy logic to manipulate the HTML
   }
 }
});

表单非常简单，但我在发送名称后操作表单的 html，这就是我需要一个组件的原因。操作 html 的代码与这里无关，对吗？这就是为什么我不会过去。

我有 Controller :

SiteApp.BookingController = Ember.Controller.extend({
  create: function() {
    // I want access name here, is possible??
  }
});

是否可以访问 BookingController 中输入名称的值？更重要的是，我如何触发 BookingController 的 create 方法？？

Answer 1

您将使用this.sendAction，请参阅http://guides.emberjs.com/v2.1.0/components/handling-events/#toc_sending-actions

例如:

app/templates/booking.hbs

{{booking-box action="create"}}

app/templates/components/booking-box.hbs

<form {{action "send" on="submit"}}>
  <label for="name">First Name</label>
  {{input name="name" id="name" value=name type="text"}}
  {{input type="submit" value="Send"}}
</form>

app/components/booking-box.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    send: function() {
      this.sendAction("action", this.get("name"));
    }
  }
});

app/controllers/booking.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    create(name) {
      console.log(name);
    }
  }
});