फ्लाई पर EmberJS TextField मान्य करें?

Question

मुझे एक फॉर्म टेक्स्टफील्ड को सत्यापित करने की आवश्यकता है जो एम्बरजेएस का उपयोग कर मॉडल की संपत्ति से जुड़ा हुआ है। मैं चाहता हूं कि उपयोगकर्ता केवल वैध, सकारात्मक संख्या टाइप करने में सक्षम हो।

मुझे jQuery.isNumber() के बारे में पता है, लेकिन मुझे नहीं पता कि इसे क्षेत्र में कैसे तारित किया जाए। मैंने Ember.computed (...) का उपयोग कर मॉडल की संपत्ति पर स्पष्ट गेटर/सेटर फ़ंक्शन लिखने का प्रयास किया, लेकिन यह काम नहीं किया।

क्या WinForms onChanging() ईवेंट के समान कुछ है जो मैं कर सकता हूं?

Answer 1

तरीके बात की इस तरह करने के लिए की एक संख्या हैं। यहां हम बाइंडिंग और पर्यवेक्षकों का उपयोग करके इसे पूरा कर सकते हैं।

सबसे पहले एक ऐसा फ़ंक्शन बनाएं जो हमेशा एक नंबर लौटाए।

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

का उपयोग करना है कि हमें निम्न

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) हम व्यक्ति की उम्र के लिए एक बाध्यकारी बना रहे हैं कर सकते हैं, लेकिन कुछ भी है कि इस बंधन से होकर गुजरता है केवल एक नंबर हो सकता है। अधिक जानकारी के लिए Ember.Binding परिवर्तन/से देखें।

2) हम टेक्स्ट फ़ील्ड के मान को देख रहे हैं और इसे बदलने पर केवल एक संख्या होने के लिए सेट कर रहे हैं। यदि उपयोगकर्ता '42 ए' में प्रवेश करता है तो हम उसे तुरंत '42' पर सेट कर देंगे। ध्यान दें कि भले ही '42 ए' टेक्स्ट इनपुट में एक संक्षिप्त सेकेंड के लिए था, फिर भी यह हमारे ट्रांसफॉर्म के कारण बाध्यकारी से गुजरने में सक्षम नहीं होता।

यहां इस उदाहरण दिखा एक बेला है: http://jsfiddle.net/nDBgC/

Answer 2

आप अपने TextField पर एक keyDown ईवेंट हैंडलर जोड़ने के लिए, 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

कोड (केवल संख्यात्मक इनपुट के प्रबंधन और स्ट्रिंग के बजाय संख्या के बंधन की अनुमति देता है, अगर वांछित):

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

टेम्पलेट:

{{number-field numericValue=someNumericProperty}} 

Answer 4

यह नवीनतम एम्बर संस्करण (एम्बर-क्ली 2.0) के लिए एक अद्यतन उत्तर (@neverfox से) है। यह coffeescript में लिखा है, और थोड़ा becomeFocus उदाहरण (http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/)

1. मिलान करने के लिए घटक उत्पन्न बदल: एप्लिकेशन

   एंबर जी घटक संख्या मैदान

2. बदलें खाका कोड (/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`

को {{एंबर देखने: