Convalidare EmberJS TextField al volo?

Question

Devo convalidare un campo di testo del modulo associato a una proprietà di un modello utilizzando EmberJS. Voglio che l'utente sia in grado di digitare solo numeri positivi validi.

Conosco jQuery.isNumber(), ma non so come collegarlo al campo. Ho provato a scrivere esplicite funzioni getter/setter sulla proprietà del modello usando Ember.computed (...), ma non ha funzionato.

C'è qualcosa di simile all'evento di WinForms onChanging() a cui posso collegarmi?

Answer 1

Ci sono un certo numero di modi per fare questo genere di cose. Qui possiamo realizzare questo usando associazioni e osservatori.

Prima consente di creare una funzione che restituirà sempre un numero.

var onlyNumber = function(input) { 
    return input.toString().replace(/[^\d.]/g, ""); 
}; 

usando che possiamo fare le seguenti

App = Ember.Application.create(); 

App.person = Ember.Object.create({ 
    age: 42 
}); 

App.NumberField = Ember.TextField.extend({ 
    valueBinding: Ember.Binding.from("App.person.age").transform(onlyNumber), 

    _cleanValue: function() { 
     this.set('value', onlyNumber(this.get('value'))); 
    }.observes('value') 
}); 

1) Stiamo creando un legame alle età della persona, ma tutto ciò che passa attraverso questo legame può essere solo un numero. Vedi Ember.Binding da/per le trasformazioni per maggiori dettagli.

2) Stiamo osservando il valore del campo di testo e impostandolo come un numero solo quando cambia. Se l'utente immette "42a", verrà immediatamente impostato su "42". Si noti che anche se "42a" era inserito nel testo per un breve secondo, non sarebbe stato in grado di passare attraverso l'associazione a causa della nostra trasformazione.

Ecco un violino che mostra questo esempio: http://jsfiddle.net/nDBgC/

Answer 2

Si potrebbe aggiungere un gestore di eventi keyDown sul TextField, vedere http://jsfiddle.net/pangratz666/SKJfF/:

App.NumberTextField = Ember.TextField.extend({ 
    // implementation of this function, see http://stackoverflow.com/a/995193/65542 
    keyDown: function(event) { 
     // Allow: backspace, delete, tab, escape, and enter 
     if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
     // Allow: Ctrl+A 
     (event.keyCode == 65 && event.ctrlKey === true) || 
     // Allow: home, end, left, right 
     (event.keyCode >= 35 && event.keyCode <= 39)) { 
      // let it happen, don't do anything 
      return; 
     } 
     else { 
      // Ensure that it is a number and stop the keypress 
      if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { 
       event.preventDefault(); 
      } 
     } 
    } 
});​ 

Answer 3

Codice (gestisce l'input solo numerica e permette legame di numero, piuttosto che di stringa, se lo si desidera):

App.NumberFieldComponent = Ember.TextField.extend({ 
    tagName: "input", 
    type: "number", 

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

    didInsertElement: function() { 
    return this.$().keypress(function(key) { 
     if ((key.charCode !== 46) && (key.charCode !== 45) && (key.charCode < 48 || key.charCode > 57)) { 
     return false; 
     } 
    }); 
    } 
}); 

Template:

{{number-field numericValue=someNumericProperty}} 

Answer 4

Questa è una risposta aggiornata (da @neverfox) per l'ultima versione di Ember (Ember-cli 2.0). E 'scritto in CoffeeScript, e un po' alterata per abbinare l'esempio becomeFocus (http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/)

1. Generare il componente:

   brace g componente numero campo

2. Modificare il codice progetto (app /components/number-field.coffee) per

`import Ember from 'ember'` 
 
    
 
    NumberFieldComponent = Ember.Component.extend 
 
     tagName: "input" 
 
     type: "number" 
 
    
 
    \t numericValue: ((key, value) -> 
 
    \t \t if arguments.length == 1 
 
    \t \t \t parseFloat(this.get('value')) 
 
    \t \t else 
 
    \t \t \t return this.set("value", (value? ? "" + value : "")) 
 
    \t).property('value') 
 
    
 
    \t assignFilter: (-> 
 
    \t \t this.$().keypress (key) -> 
 
    \t \t \t if ((key.charCode != 46) && (key.charCode != 45) && (key.charCode < 48 || key.charCode > 57)) 
 
    \t \t \t \t false 
 
    \t).on('didInsertElement') 
 
      \t \t 
 
    
 
    `export default NumberFieldComponent`