2011-12-26 3 views
19

일부 계산을 실행하려는 일부 필드가있는 웹 사이트가 있습니다. 수량 입력이 있고 내 백본에서 .js보기 나는이 입력에 "변경"이벤트를 바인딩했습니다.사용자가 입력 한 데이터의 값을 얻으려면 어떻게해야합니까?

입력란의 변경 값은 어떻게 얻습니까?

값을 얻기 위해이 방법을 찾았지만, 내 기능에서 요소 ID를 다시 알아야하기 때문에 잘못되었습니다. 예를 들어, 나는 이것을 수업에서 할 수 없었다.

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)이 아니라는 것을 안다. 그것은 단지 컨테이너 일 뿐이다.

답변

22

jQuery는 에 event 개체를 보냅니다. 이를 사용하여 변경된 입력을 검색 할 수 있습니다. 당신이 콜백 함수의 인수로 가져올 수있는 이벤트의 target를 사용할 필요가 http://jsfiddle.net/tz3XS/138/

+0

는 작동, 감사합니다! 왜 내가 어디서나 문서에서 그것을 보지 못하는지 궁금하다. –

+1

실제로 이것이 백본이 아니기 때문에 모든 백본은 렌더링 된 후에 요소의 이벤트에 함수를 바인딩합니다. 콜백 함수에 인수를 전달하는 것은 jQuery이며 이것이 jQuery 문서에 잘 설명되어있을 것입니다. 그러나이 jquery 문서 페이지를 참조하는 라인을 추가하는 것은 해를 끼치 지 않을 수 있습니다. – Sander

0

:

window.Calculations = Backbone.View.extend({ 

    //(...) 

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


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

}); 

나는 예로서 jsfiddle을 만들었습니다. 는

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 = 새 창 (난 당신이 우리에게 내가 window.CalcModel로 교체 모델 코드 (빈 모델)을 제공하지 않았기 때문에, 자신이 그것을 작동하게하는 몇 가지 코드를 추가했다). 계산 ({model : 새 CalcModel(), el : '#myView'});

예를 http://jsfiddle.net/saelfaer/uxHLL/

관련 문제