Làm cách nào để có được giá trị của dữ liệu người dùng đã nhập?

Question

Giả sử tôi có một trang web với một số trường mà tôi muốn chạy một số tính toán. Tôi có một số lượng đầu vào, và trong backbone.js của tôi Xem tôi bị ràng buộc sự kiện "thay đổi" để đầu vào này.

Làm cách nào để nhận giá trị của các thay đổi đối với trường nhập?

Tôi tìm thấy phương pháp này (bên dưới) để nhận được giá trị, nhưng nó cảm thấy sai vì tôi phải biết lại ID phần tử trong hàm của mình. Tôi không thể làm điều này với một lớp học, ví dụ.

window.Calculations = Backbone.View.extend({ 

    (...) 

    events: { 
     'change input#quantity': 'changeQuantity' 
    }, 


    changeQuantity: function() { 
     var val = $(this.el).find('input#quantity').val(); 
     this.model.set({'quantity': val}); 
    } 

}); 

Và trong HTML:

<input type="text" id="quantity" value="<%= quantity %>"> 

Am tôi tiếp cận này một cách chính xác? Có một biến truy cập đối tượng đã được thay đổi không? Tôi biết rằng $ (this.el) không phải là nó, nó chỉ là container.

Answer 1

jQuery gửi đối tượng event đến chức năng của bạn changeQuantity. Với nó, bạn có thể lấy đầu vào đã thay đổi.

window.Calculations = Backbone.View.extend({ 

    //(...) 

    events: { 
     'change input#quantity': 'changeQuantity' 
    }, 


    changeQuantity: function(e) { 
     var val = $(e.currentTarget).val(); 
     this.model.set({'quantity': val}); 
    } 

}); 

Tôi tạo ra một jsfiddle làm ví dụ: http://jsfiddle.net/tz3XS/138/

Answer 2

bạn phải sử dụng các target của sự kiện mà bạn có thể lấy như là đối số của hàm callback. (tôi đã phải thêm một số mã bản thân mình để làm cho nó làm việc, kể từ khi bạn không cung cấp cho chúng tôi mã model i thay nó bằng window.CalcModel (một mô hình rỗng))

window.CalcModel = Backbone.Model.extend({}); 

window.Calculations = Backbone.View.extend({ 

    events: { 
     'change input#quantity': 'changeQuantity' 
    }, 

    initialize: function() { 

    }, 

    changeQuantity: function(evt) { 
     var val = $(evt.target).val(); 
     this.model.set({'quantity': val}); 
     $(this.el).find('#result').text('new value = ' + val); 
    }, 

    render: function() { 

    } 

}); 

var c = new cửa sổ. Các tính toán ({model: new CalcModel(), el: '#myView'});

ví dụ http://jsfiddle.net/saelfaer/uxHLL/