EmberJS TextField'ı anında doğrulayın?

Question

EmberJS kullanarak bir modele bağlı olan bir form metin alanını doğrulamam gerekir. Kullanıcının yalnızca geçerli, pozitif sayıları yazabilmesini istiyorum.

jQuery.isNumber() yöntemini biliyorum, ancak bunu alana nasıl bağlayacağımı bilmiyorum. Ember.computed (...) kullanarak modelin mülkünde açık getter/setter işlevlerini yazmayı denedim, ancak çalışmadı.

Bağlayabileceğim WinForms onChanging() olayına benzer bir şey var mı?

Answer 1

. Burada bağlama ve gözlemciler kullanarak bunu başarabiliriz.

Öncelikle her zaman bir sayı döndürür bir işlev oluşturmanızı sağlar.

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

aşağıdaki

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) Bir Kişinin yaşına Bağlama yaratıyor yapabileceği kullanarak, ancak bu bağlanma geçer şey sadece bir sayı olabilir. Daha fazla ayrıntı için dönüşümler için Ember.Binding adresine bakın.

2) Metin alanının değerini gözlemleyerek ve değiştirdiğinde sadece bir numara olmasını ayarlıyorsunuz. Kullanıcı '42a' girerse hemen '42' olarak ayarlayacağız. Kısa bir saniye için '42a' metin girişinde olsa bile, dönüşümümüz nedeniyle ciltlemeyi geçemeyeceğini unutmayın. (Istenirse, yalnızca sayısal girişlerini işleyiş ve dize yerine sayısının bağlayıcı sağlar) http://jsfiddle.net/nDBgC/

Answer 2

Sen, TextField üzerinde bir keyDown olay işleyicisi ekleyin http://jsfiddle.net/pangratz666/SKJfF/ görebiliyordu: bu tür bir şey yapmak için çeşitli yolları vardır

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

Kodu: Burada

bu örneği gösteren bir keman olduğunu

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

Şablon:

{{number-field numericValue=someNumericProperty}} 

Answer 4

Bu son Kor sürümü (Kor-cli 2.0) için (@neverfox itibaren) güncelleştirilmiş bir cevap. Bu CoffeeScript yazılmış ve biraz bileşeni oluşturmak becomeFocus örneği (http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/)

1. eşleşecek şekilde değiştirilir: (app

   kor gr bileşen sayısı alan

2. değiştirme planı kodunu /components/number-field.coffee)

`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`

için