如何以編程方式更新餘燼輸入字段

我正在開發一個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); 
    } 
}

我希望輸入字段中的值在用戶輸入數字後保持美國貨幣格式。但沒有發生。輸入字段的值綁定到變量儲蓄的索引控制器。當我得到格式化的值newValue，我想在輸入字段中反映這一點。

我都嘗試灰燼方式this.savings = NEWVALUE和jQuery的方式$（「＃userSavings」）VAL（NEWVALUE）。但都不起作用。我可以看到格式爲的輸出變量變量，但它不反映在輸入字段上。

當我在中實現它時，只有jQuery（獨立jQuery應用程序），它的工作原理。但是當Ember進入畫面時，它不起作用。

如何解決這個問題？

來源

2016-04-06 Vijay Malik

什麼是ember版本？ – miguelcobain

我使用Ember 1.6.1和jQuery 1.11。由於某些原因，我無法升級到較新版本的Ember。 –

你可以做'this.set（'savings'，newValue）'。爲什麼這麼複雜。只需使用CP，而不是觀察者，然後在set（）中進行格式化。 – Lux

一個解決方案可以宣佈你IndexController內formatMoney功能並添加action輸入觸發格式功能

控制器

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


    } 
    } 


});

這裏的工作演示http://emberjs.jsbin.com/zeruyu/edit?html,js,console,output

來源

2016-04-06 22:15:46

我想在輸入字段中顯示「Formatted Savings =」顯示的值。我想要在輸入字段中應用格式。投入領域爲34,345美元。 –

我已經更新了我的答案和演示 –

這裏第一個也很重要的是要理解爲什麼它不能正常工作，並且它是你的餘燼版本的限制：

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

您可能會發現其他的代碼，將工作，但總是因爲你在未來的runloop更新。

來源

2016-04-08 11:14:39 Lux

如何以編程方式更新餘燼輸入字段

回答

相關問題