綁定的參數餘燼分量和來自控制器

我想創建在餘燼下述成分（模板/組件/回波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>

只是一個文本字段和處理它標籤放置在同一行中。

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）：

我在組件的控制器（組分/回波hlabel-tf.js）創建的功能

<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方法在控制檯上打印它們，但我始終打印「...」

來源

2017-04-25 Yago

您的代碼中有'on ='focusOut''。你有沒有嘗試keyDown/keyUp/keyPress，這會改變每個鍵後的值。 –

今天下午我會試一試。在此先感謝 – Yago

您正在使用純html5 input，它不會執行雙向自己綁定。即使你輸入了一些東西，它也不會反映到textValue屬性中。您可以像這個twiddle那樣使用ember的內置input組件。我相信這會解決你的問題。

來源

2017-04-26 08:01:24 alptugd

哇...玩弄旋轉，似乎它會解決我的問題。最近我會檢查，因爲現在我在另一個環境中。另一方面，我不知道'胡扯旋轉'。每個人都可以通過這種方式來展示問題。感謝@alptugd的答案，並發現我的燼捻。 – Yago

旋轉對試驗來說很棒;我會極力推薦它。 – alptugd

謝謝。它像一個魅力。 – Yago

綁定的參數餘燼分量和來自控制器

回答

相關問題