mercredi 6 avril 2016

How to programmatically update ember input field

I am developing an Ember Application that takes user input in input field and formats it in American currency and then shows the formatted value to user.

The template is:

<script type="text/x-handlebars" id="index">

{{input value=savings id="userSavings"}}

Formatted Savings={{formattedSavings}}

</script>

The Controller is:

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'),

})

the formatMoney function is:

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

I want the value in input field to remain in American currency format after user enters a digit. But it's not happening. The value of input field is bound to variable savings of IndexController. when I get the formatted value newValue, I want to reflect this in the input field.

I tried both Ember way this.savings=newValue and the jQuery Way $("#userSavings").val(newValue); but neither works. I can see the output in formattedSavings variable but it doesn't reflect on input field.

When I implement it in jQuery only (standalone jQuery application), it works. But when Ember comes into picture, it doesn't work.

How to solve this issue?




Aucun commentaire:

Enregistrer un commentaire