Xác thực TextField của EmberJS khi đang di chuyển?

Question

Tôi cần phải xác thực một trường văn bản biểu mẫu được ràng buộc với thuộc tính của một mô hình sử dụng EmberJS. Tôi muốn người dùng chỉ có thể nhập số hợp lệ, số dương.

Tôi biết về jQuery.isNumber(), nhưng tôi không biết cách kết nối nó với trường. Tôi đã thử viết các hàm getter/setter rõ ràng trên thuộc tính của mô hình bằng cách sử dụng Ember.computed (...), nhưng nó không hoạt động.

Có điều gì tương tự với sự kiện WinForms onChanging() mà tôi có thể kết nối không?

Answer 1

Có một số cách để làm việc này. Ở đây chúng ta có thể thực hiện điều này bằng cách sử dụng các ràng buộc và quan sát viên.

Đầu tiên cho phép tạo một hàm luôn trả về một số.

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

Sử dụng mà chúng ta có thể làm như sau

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) Chúng tôi đang tạo ra một Binding tuổi của Người, nhưng bất cứ điều gì mà đi qua ràng buộc này chỉ có thể là một số. Xem Ember.Binding đến/từ các phép biến đổi để biết thêm chi tiết.

2) Chúng tôi đang quan sát giá trị của trường văn bản và đặt giá trị đó thành một số khi nó thay đổi. Nếu người dùng nhập '42a', chúng tôi sẽ đặt ngay lập tức trở lại '42'. Lưu ý rằng mặc dù '42a' nằm trong đầu vào văn bản trong một giây ngắn ngủi nhưng nó sẽ không thể vượt qua ràng buộc do biến đổi của chúng ta.

Đây là một fiddle cho thấy ví dụ này: http://jsfiddle.net/nDBgC/

Answer 2

Bạn có thể thêm một handler keyDown sự kiện trên TextField bạn, hãy xem 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

Mã (xử lý đầu vào chỉ số và cho phép ràng buộc của số chứ không phải là chuỗi, nếu muốn):

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

mẫu:

{{number-field numericValue=someNumericProperty}} 

Answer 4

Đây là câu trả lời được cập nhật (từ @neverfox) cho phiên bản Ember mới nhất (Ember-cli 2.0). Nó được viết bằng coffeescript, và một chút thay đổi để phù hợp với ví dụ becomeFocus (http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/)

1. Tạo các thành phần:

   ember g thành phần số trường

2. Thay đổi mã kế hoạch chi tiết (ứng dụng /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`