How to create promise aware numeric input

Question

The following is what I have so far. The problem is that if number-input is bound to an async ember-data model property (which will return a promise the frist time an resolve later) - the code below does not work and displays a zero instead.

How can I get it promise aware?

USAGE: (In this case vehicleService is {async : true})

{{number-input numberValue=model.vehicleService.cost}}

CODE:

import Ember from 'ember';

var DELETE_KEY = 46;
var INSERT_KEY = 45;
var ZERO_KEY = 48;
var NINE_KEY = 57;

export default Ember.TextField.extend({
  tagName: 'input',
  type: 'number',

  numberValue: function(key, value) {
    if (arguments.length === 1) {
      var number = parseFloat(this.get('value'));
      return isNaN(number) ? 0 : number;
    } else {
      return this.set('value', (value !== void 0 ? '' + value : ''));
    }
  }.property('value'),

  didInsertElement: function() {
    return this.$().keypress(function(key) {
      if ((key.charCode !== DELETE_KEY) && (key.charCode !== INSERT_KEY) && (key.charCode < ZERO_KEY || key.charCode > NINE_KEY)) {
        return false;
      }
    });
  }
});

hewsonism · Answer 1 · 2015-06-02T23:19:23.667

0

App.NumberInputComponent = Em.Component.extend({
  attributeBindings: ['value', 'type'],
  tagName: 'input',
  type: 'number',
});

Example -- http://emberjs.jsbin.com/jupoworuga/1/edit

edited Jun 02 '15 at 23:19

answered Jun 02 '15 at 06:29

hewsonism

424
4
11

I can still type word characters into that box – jax Jun 02 '15 at 11:36
I edited my answer to add 'type' as a attributeBinding. That'll create a input of type number, but that doesn't stop someone from entering non-numerics into the input. If thats your goal, you'll have to do something w/ javascript. (see http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input for a generic solution). To use ember add a 'change' action handler, get out the input and remove characters that are not numbers. If you want I can include a possible solution in my answer. – hewsonism Jun 02 '15 at 23:23
Actually now it is not binding properly. I set it like this `{{number-input value=model.vehiclePriceAdjs.firstObject.amount }}` but the amount is never updated in the ember-data model. – jax Jun 03 '15 at 01:24
It seems to have fixed itself when I changed from `Em.Component` to `Em.TextField`, but still the async binding is not working when I load the route the first time. Instead of the amount it produces 0. – jax Jun 03 '15 at 01:49
Can you provide a jsbin (emberjs.jsbin.com)? If the model has the right thing and your component/textfield/whatever does not, then something is wrong with the way you set up your binding. – hewsonism Jun 03 '15 at 04:40
In your jsbin (http://emberjs.jsbin.com/jupoworuga/1/edit), if you type text in the output field, it does not update the other fields. It is like a one way binding for some reason. – jax Jun 03 '15 at 10:39

How to create promise aware numeric input

1 Answers1