javascript - 将参数绑定(bind)到 ember 组件并从 Controller 处理它

Question

我想在 ember 中创建以下组件(模板/组件/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>

只是将一个文本字段和一个标签放置在同一行中。我已经在组件的 Controller 中创建了函数(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>

问题是，即使 Action 在事件触发时被触发，表示输入值的变量(textValue)也始终保持不变(“...”)。似乎外部模板和组件之间的绑定(bind)是在开始时创建的，但是如果我在文本字段中放入更多字母，则 textValue 的值保持不变并且不会改变。我想在向文本框中添加字母时，使用 showText 方法在控制台中打印它们，但我总是打印“...”

Answer 1

您使用的是纯 html5 input，它本身不进行双向绑定(bind)。也就是说，即使您输入某些内容，它也不会反射(reflect)到 textValue 属性中。您可以使用 ember 的内置 input 组件，如 twiddle 所示。 。我相信这会解决您的问题。