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的代码在这里不相关，对吧？这就是为什么我不会过去的。

我有控制器：

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

例如：

应用程序/模板/ booking.hbs

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

应用程序/模板/组件/预订-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>

应用/组件/预订-box.js

import Ember from 'ember';

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

应用程序/控制器/ booking.js

import Ember from 'ember';

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

如何将组件中的输入值与某些控制器进行通信？

1 个答案: