Ember Dollar Input

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{view App.MoneyField}}
</script>

CSS

html, body {
    font-size: 9pt;
}
h1 {
    font-size: 18pt;
}
h2 {
    font-size: 12pt;
}
.location ul { list-style-type: none; }
.location ul li { 
    list-style-type: none; 
    display: inline-block;
    margin: 0;
    padding:0 10px 0 10px;
    border: solid 1px gray;
    border-right:none;
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();


App.MoneyField = Ember.TextField.extend({
	type: 'text',
    placeholder:"our place holder",
    attributeBindings: ['placeholder'],
    
    /*
    didInsertElement: function(){
      this.$().attr('placeholder', "Walallalal");
    },*/
	valueListener: function () {
		
		var clean_stake = this.get('value');
        //Replace any non numeric chars
        clean_stake = clean_stake.replace(/[^0-9\.]|(\.{3})+|(\.{2})+/, '');
        
        if (clean_stake == "" || parseInt(clean_stake) == 0) {
            this.set('value', '');
            return;
        }
        
        //get the decimal length
        var decimalLength = clean_stake.split('.');
        
        //if there are decimal places:
        if (decimalLength.length > 1) {
            
            //If 2 digits fix to 2 decimal places
            if (decimalLength[1].length >= 2) {
                decimalLength = 2;
                clean_stake = parseFloat(clean_stake);
                clean_stake = clean_stake.toFixed(2);
            }
            //If 1 digit fix to 1 decimal place
            else if (decimalLength[1].length == 1) {
                clean_stake = parseFloat(clean_stake);
                clean_stake = clean_stake.toFixed(1);
            }
        }
        
        this.set('value', clean_stake);
        
	}.observes("this.value")
});