在组件内部传递动作的最佳实践

Question

我正在处理在组件内部传递动作。一般来说，我正在使用这样的方法

主页.hbs：

{{layerOne action1="action1" action2="action2" action3="action3" action4="action4" }}

主页.js

actions:{
    action1: function () {     
      //do something
    },
    action2: function () {  
      //do something    
    },
    action3: function () {   
      //do something   
    },
    action4: function () {  
      //do something   
    }
}

第一层文件

{{layerTwo action1="action1" action2="action2" action3="action3" action4="action4" }}

第一层.js

actions:{
    action1: function () {   
      this.sendAction('action1');   
    },
    action2: function () {      
      this.sendAction('action2');   
    },
    action3: function () {   
      this.sendAction('action3');      
    },
    action4: function () {    
      this.sendAction('action4');     
    }
}

layerTwo.hbs

{{#paper-button onClick=(action "action1")}}Action 1{{/paper-button}}
{{#paper-button onClick=(action "action2")}}Action 2{{/paper-button}}
{{#paper-button onClick=(action "action3")}}Action 3{{/paper-button}}
{{#paper-button onClick=(action "action4")}}Action 4{{/paper-button}}

layerTwo.js

actions:{
    action1: function () {   
      this.sendAction('action1');   
    },
    action2: function () {      
      this.sendAction('action2');   
    },
    action3: function () {   
      this.sendAction('action3');      
    },
    action4: function () {    
      this.sendAction('action4');     
    }
}

如果我添加更多的动作，我必须每次都一一配置图层的js文件和hbs文件。hbs 也会很长。例如。{{layerOne action1="action1" action2="action2" action3="action3" action4="action4" etc...}}

这种情况有什么最佳实践吗？谢谢你。

Answer 1

您可以使用闭包动作将动作处理程序从上层传递到下层。

ember 中有两种不同的动作传递机制：

1. 事件传递，例如{{layerTwo action1="action1". （需要调用sendActions每个组件才能冒泡。）
2. 关闭动作，例如{{layerTwo action1=(action "action1")（只需要将动作处理程序传递到底部。）

这个小玩意演示了如何使用闭包动作。您可以看到 js 文件中没有任何内容。

如果您使用带引号的闭包操作，例如哈希(action 'action1')函数actions将被搜索并传递到底部组件。

如果您使用不带引号的闭包操作，(action action1)则该组件的函数将被传递到底部组件。（该函数需要在该组件中定义或传递给该组件。）

这是了解关闭操作的非常好的资源。