將參數綁定到余燼組件並從控制器處理它

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組件。 我相信這會解決您的問題。