如何在 Handlebars 模板的输入字段内使用 Ember.js 的 action Helper 传递参数？答案

【问题标题】：How to pass parameters with the action Helper of Ember.js inside an input field from an Handlebars template?如何在 Handlebars 模板的输入字段内使用 Ember.js 的 action Helper 传递参数？
【发布时间】：2013-09-12 11:18:12
【问题描述】：

在我的车把模板中，我有这个循环：

{{#each itemController="fund"}}
    <li>                        
        <label>{{title}}</label>            
        <span>{{amount}}</span>
        {{input type="text" placeholder="new user"
        value=newFullName action="createUser"}}
        {{partial 'user-list'}}
    </li>
{{/each}}

并且需要将当前对象作为参数传递给“createUser”操作。像这样的：

action="createUser(this)"

或：

action 'createUser' this

但似乎 ember 无法处理输入字段内操作的参数...

我错过了什么吗？

【问题讨论】：

那么你的“动作”将如何执行？通常您必须提供类似 event="click" 或其他方式来调用该操作。
默认是进入时调用动作。
我遇到了类似的问题！ Ember 教程 (guides.emberjs.com/v2.4.0/tutorial/autocomplete-component) 的 {{input value=filter key-up=(action 'autoComplete' filter)}} 不起作用，触发“在（生成的索引控制器）中找不到名为 'autoComplete' 的操作” .
这现在是可能的 - 请参阅下面的答案

标签： javascript ember.js handlebars.js

【解决方案1】：

我认为使用来自input 视图助手的action 属性是不可能做到这一点的。

一种解决方法可以是将您的输入包装在一个表单中，该表单使用 action 视图助手使用提交事件，如下所示：

模板

{{#each}}
      <li>                   
          <form {{action "createUser" this on="submit"}}>
              {{name}}
              {{input type="text" value=name}}          
          </form>
      </li>
  {{/each}}

路线

  ...
  actions: {
    createUser: function(user) {
      alert(user.get('name'));
    }
  }
  ...

所以当用户按下回车键时，就会触发事件。

action 属性和 action view helper 的主要区别在于 action view helper 更灵活，你可以提供上下文并将其放在任何标签内：

<div {{action "someAction" someObject}} on="click">Click me</div>

在路线中：

actions: {
  someAction: function(someObject) {
    // do something with the someObject
  }
}

更多信息请查看docs

请查看 jsfiddle 以查看该示例的实际效果http://jsfiddle.net/marciojunior/UAgjX/

希望对你有帮助

【讨论】：

移动括号
点击我
有没有解决方法在action helper 中传递onchange 事件并访问"files" 属性？

【解决方案2】：

您现在可以传递一个函数以及值 -

submit=(action 'setName' 'Sal')

http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_closure-actions

【讨论】：

是的，这行得通。很惊讶他们还没有把它放在指南中
现在这应该是新版本可以接受的答案

【解决方案3】：

最后我得到了这个解决方案：

模板

{{input class="newUser" type="text" value=newFullName placeholder="add user"}}
<button {{action 'createUser' this newFullName}}>Send</button>

控制器

createUser: function (fund, newFullName) {
        var fullName = newFullName;                        
        var user = this.store.createRecord('appUser', {
            fullName: fullName,                
            fund: fund,
            payments:[]
        });
        user.save().then(function(){                
            fund.get('users').pushObject(user);                
            fund.save().then(function(){
                fund.reload();
            });
        });
    }

【讨论】：

为什么要使用这个？为什么不在操作处理程序中执行 get("newFullName") ？

【解决方案4】：

您可以将参数传递给操作助手：{{action "doSomething" xxx }}

其中 doSomething 是您的控制器方法，而 xxx 是模板当前上下文中的任何内容。

【讨论】：