Javascript Ember uu如何从组件控制器访问控制器操作

我正在尝试向ember组件添加一些outter功能。组件如下所示：

app/templates/programmers.hbs

{{echo-hlabel-tf 
   id= "id-test-hlabel"
   class="class-test-hlabel-mio"
   label="Horizontal textfield"
   textValue="..."
   regExp="^([a-z0-9]{5})$"
   errorMsg="Text hasn't five characters"
   fnActionButtonClicked = "sayHello"
}}

<div id="echo-hlabel-tf">
    <span id="{{id}}-echo-hlabel-tf-label" 
          class="{{class}}-echo-hlabel-tf-hlabel">
    {{label}}
</span>
<span id="{{id}}-echo-hlabel-tf-value" 
      class="{{class}}-echo-hlabel-tf-value">
    {{input id='input-id' class='input-class' value=textValue
            focus-out = (action 'validateRegExp' textValue regExp) 
    }}
</span>
<span id="{{id}}-echo-hlabel-tf-error-msg" 
 class="{{class}}-echo-hlabel-tf-error-msg">
    <p id='error-msg' class="error-msg">
        {{errorMsg}}
    </p>
</span>

<div>
    <h2>Testing passing functions to the component</h2>
        <input type="button" {{action "actionButtonClicked"}}/>
</div>
</div>

import Ember from 'ember';

export default Ember.Component.extend({
   classNameBindings:['error'],
   error:false,

   actions: {
    validateRegExp(text,regExpStr,event){
        let regExpObj = new RegExp(regExpStr)
        if(regExpObj.test(text)){
            this.set('error',false);
        }else{
            this.set('error',true);
        }
    },
    actionButtonClicked(){
        console.log('Arrives to the component');
        var action = this.get('fnActionButtonClicked');
        console.log(action);
        // How can I call the function in another controller
        // With parameter fnActionButtonClicked name
    }
 }
});

我正在玩参数'fnActionButtonClicked'。此参数表示执行的函数，它不在组件的功能内（比如将javascript函数作为参数传递）。我是菜鸟，我不知道具体的余烬方式来做这件事。组件的模板是：

app/templates/components/echo hlabel tf.hbs

{{echo-hlabel-tf 
   id= "id-test-hlabel"
   class="class-test-hlabel-mio"
   label="Horizontal textfield"
   textValue="..."
   regExp="^([a-z0-9]{5})$"
   errorMsg="Text hasn't five characters"
   fnActionButtonClicked = "sayHello"
}}

<div id="echo-hlabel-tf">
    <span id="{{id}}-echo-hlabel-tf-label" 
          class="{{class}}-echo-hlabel-tf-hlabel">
    {{label}}
</span>
<span id="{{id}}-echo-hlabel-tf-value" 
      class="{{class}}-echo-hlabel-tf-value">
    {{input id='input-id' class='input-class' value=textValue
            focus-out = (action 'validateRegExp' textValue regExp) 
    }}
</span>
<span id="{{id}}-echo-hlabel-tf-error-msg" 
 class="{{class}}-echo-hlabel-tf-error-msg">
    <p id='error-msg' class="error-msg">
        {{errorMsg}}
    </p>
</span>

<div>
    <h2>Testing passing functions to the component</h2>
        <input type="button" {{action "actionButtonClicked"}}/>
</div>
</div>

import Ember from 'ember';

export default Ember.Component.extend({
   classNameBindings:['error'],
   error:false,

   actions: {
    validateRegExp(text,regExpStr,event){
        let regExpObj = new RegExp(regExpStr)
        if(regExpObj.test(text)){
            this.set('error',false);
        }else{
            this.set('error',true);
        }
    },
    actionButtonClicked(){
        console.log('Arrives to the component');
        var action = this.get('fnActionButtonClicked');
        console.log(action);
        // How can I call the function in another controller
        // With parameter fnActionButtonClicked name
    }
 }
});

因此，模板'fnActionButtonClicked'（SayHello）的参数将通过var action=this.get（'fnActionButtonClicked'）在actionButtonClicked（）中检索

因此，在这一点上，出现了疑问。由于我无法将javascript函数作为模板的参数传递（或者至少，我认为这不是正确的方法），因此我创建了一个控制器'sampleController'，用以下代码创建操作'sayHello'（请参见参数fnActionButtonClicked值）：

app/controllers/sample controller.js

{{echo-hlabel-tf 
   id= "id-test-hlabel"
   class="class-test-hlabel-mio"
   label="Horizontal textfield"
   textValue="..."
   regExp="^([a-z0-9]{5})$"
   errorMsg="Text hasn't five characters"
   fnActionButtonClicked = "sayHello"
}}

<div id="echo-hlabel-tf">
    <span id="{{id}}-echo-hlabel-tf-label" 
          class="{{class}}-echo-hlabel-tf-hlabel">
    {{label}}
</span>
<span id="{{id}}-echo-hlabel-tf-value" 
      class="{{class}}-echo-hlabel-tf-value">
    {{input id='input-id' class='input-class' value=textValue
            focus-out = (action 'validateRegExp' textValue regExp) 
    }}
</span>
<span id="{{id}}-echo-hlabel-tf-error-msg" 
 class="{{class}}-echo-hlabel-tf-error-msg">
    <p id='error-msg' class="error-msg">
        {{errorMsg}}
    </p>
</span>

<div>
    <h2>Testing passing functions to the component</h2>
        <input type="button" {{action "actionButtonClicked"}}/>
</div>
</div>

import Ember from 'ember';

export default Ember.Component.extend({
   classNameBindings:['error'],
   error:false,

   actions: {
    validateRegExp(text,regExpStr,event){
        let regExpObj = new RegExp(regExpStr)
        if(regExpObj.test(text)){
            this.set('error',false);
        }else{
            this.set('error',true);
        }
    },
    actionButtonClicked(){
        console.log('Arrives to the component');
        var action = this.get('fnActionButtonClicked');
        console.log(action);
        // How can I call the function in another controller
        // With parameter fnActionButtonClicked name
    }
 }
});

从“余烬”导入余烬

export default Ember.Controller.extend({
   actions:{
    sayHello(){
        console.log("I'm saying hello this time");
    }
  }

}))

我如何从app/components/echo hlabel tf.js:actionButtonClicked（）执行app/controllers/sample-controller.js:sayHello（）的代码？如何从组件控制器访问另一个控制器？这是实现我目标的正确途径吗

---

提前感谢

而不是sample-controller.js，您需要为特定路线

程序员创建控制器

。所以创建

app/controllers/programmers.js

文件

export default Ember.Controller.extend({
  actions:{
    sayHello(){
      console.log("I'm saying hello this time");
    }
  }
})

在组件内部

app/components/echo hlabel tf.js

actionButtonClicked(){
  console.log('Arrives to the component');
  this.sendAction('fnActionButtonClicked');        
}

---

看来还是不行。我已经在app/controllers/programmers.js中创建了控制器，并按照您所说的发送了操作，但是我得到了“ember.debug.js:18008 Nothing handle the action‘sayHello’。如果您确实处理了该操作，则该错误可能是由控制器中的操作处理程序返回true导致的，从而导致该操作冒泡。”。似乎找不到方法：（你是否将组件

echo hlabel tf.hbs

包含在programmers.hbs模板中？看一看我为你创建的。谢谢你的玩弄。我正在查看。非常感谢jejeSorry抱歉抱歉…我相信你在那次jajaja之后会恨我的…你从一开始就完全正确。只是，我创建了一个控件。）oller的名字是programmer.hbs而不是programmers.hbs jejeje…这真的很奇怪。很抱歉让你耽误了时间，再次感谢：）