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

Question

我想在ember中创建如下组件(templates/components/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);
    }
}
});

我想从另一个模板（模板/programmers.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) 始终保持不变 ("...") 。似乎外部模板和组件之间的绑定是在开始时创建的，但是如果我在 textfield 中放置更多字母，则 textValue 的值保持不变并且不会改变。我想在向 textBox 添加字母时，使用控制台使用 showText 方法打印它们，但我总是打印“...”

Answer 1

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