사용자가 입력 값을 변경할 때 트리거 기능

Question

방금 ​​backbone.js로 시작했으며 현재 텍스트 입력 요소가 포함 된 div #listing_filter 페이지를 만들고 있으며 RESTful 백엔드에서 가져온 일부 목록을 보여주는 표가 있습니다 (PHP/Codeigniter). 텍스트 입력의 값은 필터로 작동하여 서버가 검색 한 결과의 범위를 좁 힙니다.

문제 : 텍스트 상자의 값이 변경 될 때마다 브라우저가 필터 값을 기반으로 다른 결과 집합을 얻길 바랍니다. 아래 텍스트 입력 값이 변경된 경우에도 updateFilter 함수가 발생하지 않습니다 내 시도입니다. 어떤 아이디어가 잘못 됐나요?

또 다른 질문은 서식 파일에 #listing_filter의 내용을 넣어야하는지, 아니면 본체 HTML에 하드 코드해야합니까? 감사!

JS 코드

window.ListingFilterView = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this, 'updateFilter'); 
    }, 

    events: { 
     'change input' : 'updateFilter' 
    }, 

    updateFilter: function() { 
     console.log('hey'); 
    } 

}); 

// Router 

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     '': 'listings', 
    }, 

    listings: function() { 
     //... some other code here 
     this.listingFilterView = new ListingFilterView(); 
    } 
}); 

HTML 코드

<div id="listing_filter"> 
    Price: <input type="text" id="listing_filter_price" /> 
    Beds: <input type="text" id="listing_filter_bedroom" /> 
    Baths: <input type="text" id="listing_filter_bathroom" /> 
</div> 

Answer 1

백본보기는보기 만의 el에 이벤트 또는 el 안에있는 요소에 응답합니다. 기본적으로보기의 el은 단지 an empty <div>이며 다른 것을 사용하도록보기를 말하지 않습니다.

사용할 el 뷰 (http://jsfiddle.net/ambiguous/5yXcU/1/) 알 수 있습니다 :

new ListingFilterView({ el: $('#listing_filter') }) 
// Or like this: 
new ListingFilterView({ el: '#listing_filter' }) 

을하거나보기를 사용하여 해당 요소 setElement (http://jsfiddle.net/ambiguous/APEfa/1/)에 자신을 첨부하도록 할 수 있습니다 :

initialize: function() { 
    this.setElement($('#listing_filter')); 
    // or setElement('#listing_filter') 
} 

또는 설정 보기를 정의 할 때 el (http://jsfiddle.net/ambiguous/nyTZU/) :

window.ListingFilterView = Backbone.View.extend({ 
    el: '#listing_filter', 
    //... 
}); 

이 문제가 해결되면 <input>은 변경 이벤트 until it loses focus을 트리거하지 않으므로 사용자가 입력을 탭 아웃하거나 keypress을 수신 대기해야 할 때까지 기다려야한다는 것을 이해해야합니다. 타이머를 사용하여 타이핑을 중단 한 시간을 감지 할 수 있습니다.