Question

我试图为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"
}}

我正在玩参数＆＃39; fnActionButtonClicked＆＃39; 。此参数表示它执行的函数，并且它不在组件的功能内（例如将javascript函数作为参数传递）。我是新手，而且我并不完全清楚这种方式。该组件的模板是：

app / templates / components / echo-hlabel-tf.hbs

<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>

正如您所看到的，在模板的底部，有一个输入类型=＆＃34;按钮＆＃34;它被＆＃34; actionButtonClicked＆＃34;绑定了。组件的控制器是：

app / components / echo-hlabel-tf.js

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
    }
 }
});

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

所以，在这一点上，怀疑来了。由于我无法将javascript函数作为模板的参数传递（或者至少，我认为它不是正确的做事方式），因此我创建了一个控制器＆＃39; sampleController＆＃39; 使用以下代码创建操作＆＃39; sayHello＆＃39; （请参阅参数fnActionButtonClicked值）：

app / controllers / sample-controller.js

从＆＃39; ember＆＃39;;

导入Ember

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（） ？如何从组件控制器访问另一个控制器？这是实现我的目标的正确方法吗？

提前致谢

Answer 1

您需要为特定路由programmers创建控制器，而不是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');        
}

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

1 个答案: