Question

我正在努力在组件内部传递动作。在一般情况下，我使用的方法是

home.hbs：

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

home.js

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

layerOne.hbs

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

layerOne.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中有两种不同的动作传递机制：

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

This twiddle演示了如何使用闭包动作。你可以看到js文件中没有任何内容。

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

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

This is a very good resource了解关闭操作。

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

1 个答案: