燃えさしコンポーネントにパラメータをバインドし、

Question

は私が燃えさしで、次のコンポーネントを作成したいコントローラ（テンプレート/コンポーネント/エコー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> 

だけでテキストフィールドからそれを扱いますラベルは同じ行に配置されます。 Iは、（構成要素/エコー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）を表す変数は常に同じ（ "..."）になります。外側のテンプレートとコンポーネントの間のバインディングは最初から作成されているようですが、テキストフィールドにさらに多くの文字を置くと、textValueの値は変わりません。私は、テキストボックスに文字を追加するので、showTextメソッドでコンソールでそれらを印刷しますが、私はいつも "..."を印刷します。

Answer 1

あなたは純粋なhtml5を使用していますinputは、それ自身で結合する。たとえ入力しても、textValue属性には反映されません。このtwiddleのように、emberの組み込みのinputコンポーネントを使用できます。私はこれがあなたの問題を解決すると信じています。