在 Emberjs 中处理组件内的动作参数

Question

为什么我的 <button> 可以工作，但 {{delete-toggle}} 组件给我的消息变量未定义？

{{delete-toggle action='deleteMessage' message=message}}

<button {{action 'deleteMessage' message}}>Some Action (param: {{message}}</button>

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: '',
    actions: {
        deleteMessage(message){ 
            console.log(message); 
            return this.sendAction('deleteMessage', message);
        }
    }
});

Answer 1

{{delete-toggle}} 组件正在触发不带参数的默认操作，但您的 deleteMessage 操作处理程序需要一个。另一方面，按钮在其 {{action 'deleteMessage' message}} 说明符中明确传递参数。

既然组件已经知道涉及的消息，为什么还要传递参数？

{{delete-toggle action='deleteMessage' message=message}}

export default Ember.Component.extend({

    // ATTRIBUTES
    message: null,

    // ACTIONS
    actions: {
        deleteMessage(){ 
            var message = this.get('message');
            console.log(message); 
            this.sendAction('deleteMessage', message);
        }
    }

});

然后您可以将按钮写得更简单一些

<button {{action 'deleteMessage'}}>Some Action (param: {{message}}</button>

顺便说一句，我不推荐空标签。你这样做有什么原因吗？另外，我不认为从动作处理程序返回值有任何用处。

在 Emberjs 中处理组件内的动作参数

Handling action parameter within a component in Emberjs

javascript

handlebars.js

ember.js