ember入力フィールドをプログラムで更新する方法

Question

Emberアプリケーションを開発して、入力フィールドでユーザー入力を受け取り、それをアメリカの通貨でフォーマットし、ユーザーにフォーマットされた値を表示します。

テンプレートである：

<script type="text/x-handlebars" id="index"> 
    {{input value=savings id="userSavings"}} 
    <p>Formatted Savings={{formattedSavings}}</p> 
</script> 

コントローラである：

App.IndexController = Ember.Controller.extend({ 
savings:null, 

formattedSavings:function(){ 
    return formatMoney(this.get('savings')); 
}.property('savings'), 

onSavingsChange:function(){ 
    newValue=formatMoney(this.savings); 
    console.log("formatted value="+newValue); 

    //this.savings=newValue; 
    //$("#userSavings").val(newValue); 
}.observes('savings'), 

}）

formatMoney関数である：

function formatMoney(inputNumber) 
{ 
try { 
     inputNumber = Math.round(inputNumber); 
     var n = inputNumber.toString().split("."); 
     n[0] = n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     return "$" + n.join("."); 
    } 
    catch(e) { 
     console.error("Error="+e); 
    } 
} 

ユーザーが数字を入力した後、入力フィールドの値をアメリカの通貨形式にしておきます。しかし、それは起こっていない。 入力フィールドの値は、変数節約indexControllerにバインドされています。フォーマットされた値newValueが得られたら、これを入力フィールドに反映したいと思います。

私は道this.savings = newValueにとjQueryウェイ$（ "＃のuserSavings"）のval（newValueに）両方エンバーを試してみました。でも動作しません。 formattedSavingsの出力を見ることができますが、入力フィールドには反映されません。

に実装すると、jQueryのみ（スタンドアロンのjQueryアプリケーション）で動作します。しかし、Emberが絵になると、動作しません。

この問題を解決するにはどうすればよいですか？

Answer 1

ソリューションは、あなたのIndexController内formatMoney関数を宣言し、作業のデモをここでフォーマット機能に

コントローラ

App.IndexController = Ember.Controller.extend({ 
savings:0, 

formatMoney:function(inputNumber){ 


    try { 

     var n = inputNumber 
     .replace(/\D/g,'') 
     .toString() 
     .split("."); 

     n[0] = n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     return n.join("."); 
    } 
    catch(e) { 
     console.error("Error="+e); 
    } 
}, 

    actions:{ 

    format:function(){ 

      //Getting the formatted value 
     var formattedSavings = this.formatMoney(this.get('savings')); 

     //Setting the formated value back to savings 
     this.set('savings', formattedSavings); 


    } 
    } 


}); 

をトリガの入力にactionを追加することができhttp://emberjs.jsbin.com/zeruyu/edit?html,js,console,output

Answer 2

ここで最初に重要なことは、なぜ動作していないのか、あなたのemberバージョンの制限事項を理解することです。

Emberは同じrunloopでテンプレートを更新しません！

だから、あなたがしなければならない唯一のことは、更新の隣に実行ループの値です！

あり、これを行うには多くの方法がありますが、おそらく最も簡単にはEmber.run.nextを使用することです：

_savings: '', 
savings: Ember.computed('_savings', function(key, val) { 
    var self = this; 
    if(arguments.length === 2) { 
     Ember.run.next(function() { 
      self.set('_savings', formatMoney(val)); 
     }); 
    } 
    return Ember.get(this, '_savings'); 
}) 

あなたは次の実行ループで更新しているため常に動作しますが、他のコードを見つけることができます。