2011-12-26 3 views
19

Скажем, у меня есть сайт с некоторыми полями, на которых я хочу выполнить некоторые вычисления. У меня есть количество ввода, и в моем 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 %>"> 

Am I приближается это правильно? Есть ли переменная, которая обращается к объекту, который был изменен? Я знаю, что $ (this.el) не так, это просто контейнер.

ответ

22

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/

+0

Спасибо, что работает! Интересно, почему я не вижу его в документации где угодно. –

+1

Фактически, поскольку это не позвоночник, вся магистральная функция связывает функцию с событием элемента после визуализации. это jQuery, который передает аргументы функции обратного вызова, и я уверен, что это хорошо документировано в документации jQuery. однако добавление строки, ссылающейся на эти страницы документации jquery, не повредит, вы правы в этом. – Sander

0

вы должны использовать 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() { 

    } 

}); 

вар с = новое окно. Вычисления ({model: new CalcModel(), el: '#myView'});

пример http://jsfiddle.net/saelfaer/uxHLL/

Смежные вопросы