将参数绑定到余烬组件并从控制器处理它

Question

我想在余烬中创建以下组件（模板/组件/ echo-hlabel-tf.hbs）

<div id="echo-hlabel-tf">
  <span id="tf-label">{{label}}</span>
  <span id="tf-value">
    <input type="text" value={{textValue}}
    {{action "validateRegExp" textValue regExp post on="focusOut"}} 
    {{action "showText" textValue post on="mouseUp"}} 
    />
  </span>
</div>

只是在同一行中放置了一个文本字段和一个标签。 我已经在组件的控制器（components / echo-hlabel-tf.js）中创建了函数：

import Ember from 'ember';

export default Ember.Component.extend({
actions: {
    validateRegExp(text,regExpStr){
        let regExpObj = new RegExp(regExpStr)
        if(regExpObj.test(text)){
            console.log('entry matches')
        }else{
            console.log('entry is wrong');  
        }

    },
    showText(text){
        console.log(text);
    }
}
});

我想从另一个模板（template / developers.hbs）使用此组件：

<ul>
 {{people-list title="List of programmers" people=model}}
</ul> 
<div>
 {{echo-hlabel-tf 
    label="Textfield horizontal"
    textValue="..." 
    regExp="^([a-z0-9]{5})$"
 }}
</div>

事实是，即使动作是在事件触发时触发的，代表输入值（textValue）的变量也始终保持相同（“ ...”）。 似乎外部模板和组件之间的绑定是在开始时创建的，但是如果我在文本字段中放置更多字母，则textValue的值将保持不变并且不会改变。 我想在文本框中添加字母时，使用showText方法在控制台上打印它们，但是我总是打印“ ...”

Answer 1

您使用的是纯html5 input ，它本身不进行双向绑定。 即使您键入某些内容，它也不会反映到textValue属性中。 您可以像在这个twiddle中那样使用ember的内置input组件。 我相信这会解决您的问题。