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

我想从另一个模板（template / 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）的变量也始终相同（“...”）。似乎外部模板和组件之间的绑定是在开头创建的，但如果我在文本字段中放入更多字母，则textValue的值保持不变并且不会更改。我想，当我在textBox中添加字母时，使用方法showText在控制台上打印它们，但我总是打印“...”

Answer 1

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

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

1 个答案: