Как получить значение введенных пользователем данных?
Скажем, у меня есть веб-сайт с некоторыми полями, на которые я хочу выполнить некоторые вычисления. У меня есть количество ввода, а в моем backbone.js View Я привязал событие "change" к этому вводу.
Как получить значение изменений в поле ввода?
Я нашел этот метод (ниже), чтобы получить значение, но он чувствует себя не так, потому что мне снова нужно знать идентификатор элемента в моей функции. Например, я не мог сделать это с помощью класса.
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});
}
});
И в HTML:
<input type="text" id="quantity" value="<%= quantity %>">
Я правильно подошел? Есть ли переменная, которая обращается к объекту, который был изменен? Я знаю, что $(this.el) не так, это просто контейнер.
Ответы
Ответ 1
jQuery отправляет объект event
вашей функции changeQuantity
. С его помощью вы можете получить измененный ввод.
window.Calculations = Backbone.View.extend({
//(...)
events: {
'change input#quantity': 'changeQuantity'
},
changeQuantity: function(e) {
var val = $(e.currentTarget).val();
this.model.set({'quantity': val});
}
});
В качестве примера я создал jsfiddle: http://jsfiddle.net/tz3XS/138/
Ответ 2
вам нужно использовать target
события, которое вы можете получить в качестве аргумента функции обратного вызова.
(я должен был добавить код сам, чтобы он работал, поскольку вы не дали нам код модели, я заменил его на window.CalcModel(пустая модель))
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 window.Calculations({model: new CalcModel(), el: '#myView'});
Пример
http://jsfiddle.net/saelfaer/uxHLL/