Knockout.js: định dạng đầu vào thời gian và giới hạn giá trị

Question

Khi tôi liên kết dữ liệu số trong mô hình khung nhìn của tôi bằng cách loại trực tiếp, nó hiển thị chính xác nhưng thay đổi kiểu dữ liệu thành chuỗi nếu người dùng thay đổi giá trị thẻ đầu vào. Vấn đề với việc gửi chuỗi là máy chủ mong đợi một giá trị số không có sẵn chuyển đổi tiềm ẩn.

Bất kỳ cách nào để yêu cầu loại trực tiếp để duy trì kiểu dữ liệu của giá trị thuộc tính ban đầu?

Mã mẫu của tôi khớp với tên kiểu xem cho tên thẻ đầu vào. Tôi sử dụng knockout không phô trương để làm các ràng buộc, mà hoạt động tốt.

// Bind the first object returned to the first view model object 
// FNS is the namespace, VM is the view model 
FNS.VM.Items[0] = ko.mapping.fromJS(data.Items[0]); 

// For each property found, find the matching input and bind it 
$.each(FNS.VM.Items[0], function (indexInArray, valueOfElement) { 
    var attrName = indexInArray; 
    var attrValue; 
    if (typeof valueOfElement == "function") 
     attrValue = valueOfElement(); 
    else 
     attrValue = valueOfElement; 

    var a = $('input[name="' + attrName + '"][type="checkbox"]'); 
    if (a.length) 
     a.dataBind({ checked: 'VM.Items[0].' + attrName }); 

    var b = $('input[name="' + attrName + '"][type="radio"]'); 
    if (b.length) 
     b.dataBind({ checked: 'VM.Items[0].' + attrName }); 

    var c = $('input[name="' + attrName + '"][type="text"]'); 
    if (c.length) 
     c.dataBind({ value: 'VM.Items[0].' + attrName }); 
}); 
ko.applyBindings(FNS); 

Answer 1

Đây là một chủ đề với một vài kỹ thuật khác nhau để giữ cho các số giá trị: https://groups.google.com/d/topic/knockoutjs/SPrzcgddoY4/discussion

Một lựa chọn là để thúc đẩy mối quan tâm này thành mô hình quan điểm của bạn và tạo ra một numericObservable để sử dụng thay vì một quan sát bình thường. Nó có thể trông giống như:

ko.numericObservable = function(initialValue) { 
    var _actual = ko.observable(initialValue); 

    var result = ko.dependentObservable({ 
     read: function() { 
      return _actual(); 
     }, 
     write: function(newValue) { 
      var parsedValue = parseFloat(newValue); 
      _actual(isNaN(parsedValue) ? newValue : parsedValue); 
     } 
    }); 

    return result; 
}; 

mẫu: http://jsfiddle.net/rniemeyer/RJbdS/

lựa chọn khác là để xử lý này với một phong tục ràng buộc. Thay vì sử dụng liên kết value, bạn có thể xác định ràng buộc numericValue và sử dụng nó thay thế. Nó có thể trông giống như:

ko.bindingHandlers.numericValue = { 
    init : function(element, valueAccessor, allBindings, data, context) { 
     var interceptor = ko.computed({ 
      read: function() { 
       return ko.unwrap(valueAccessor()); 
      }, 
      write: function(value) { 
       if (!isNaN(value)) { 
        valueAccessor()(parseFloat(value)); 
       }     
      }, 
      disposeWhenNodeIsRemoved: element 
     }); 

     ko.applyBindingsToNode(element, { value: interceptor }, context); 
    } 
}; 

mẫu: http://jsfiddle.net/rniemeyer/wtZ9X/