Ember hbs模板是否应该将参数从输入字段传递给函数，如果是这样的话？

Posted 2021-05-06

我有一个具有输入字段和相关按钮的表单，我有一个函数，希望将用户键入的值输入到输入字段中。我应该以某种方式从hbs模板传递它，还是应该从函数中的DOM中获取它。

有这样的事吗？

{{ action myFunction $("#myInputId").val() }}

答案

从概念上讲 - 你走在正确的轨道上。

在这种情况下......这是一条路线（申请路线）

import Ember from 'ember';

export default Ember.Route.extend({

  alertInput: function(inputValue) {
    alert(inputValue);
  },

  actions: {
    doSomething(userInput) { // (this is already a function)
    // alert(userInput); // or... use a regular function in the action
      this.get('alertInput')(userInput);
    },
  },

});

这是一个模板（应用程序模板）

{{input value=userInputProperty}}

<button {{action 'doSomething' userInputProperty}}>doSomething</button>

此操作采用函数名称 - 然后将值作为参数传递给函数。

根据您的尝试，您可以通过几种方式做事。

https://ember-twiddle.com/3080649ecf98cddef6d3d64b186ba741?openFiles=templates.application.hbs%2C（旋转的好时机）

另一答案

是的，您可以通过value的action属性执行此操作，如下所示：

<input oninput={{action "myaction" value="target.value"}}/>

这是给你的ember-twiddle。

另一答案

您可以将输入框的值绑定到控制器属性，并且可以使用该属性在按钮操作中派生输入框的值。

这是给你的ember-twiddle。

注意：灰烬控制器是SINGLETONS。

另一答案

不能直接传递值，但可以将值绑定到属性。我建议将输入包装在一个组件中，并将输入值绑定到一个组件属性。然后，您可以将值作为操作参数传递，或直接在组件的操作处理程序中访问它。该解决方案避免了单独的控制器，并且该组件可能被重用。

另见https://guides.emberjs.com/v2.18.0/templates/actions和https://guides.emberjs.com/v2.18.0/templates/input-helpers。