2012-05-20 7 views
8

백본을 사용하여 간단한 검색 페이지를 구현하고 싶습니다. 단일 페이지 응용 프로그램이 아니지만 백본을 사용하여 JavaScript 코드를 구조화하고 싶습니다. 검색 페이지는 검색 양식과 검색 결과로 구성됩니다. 검색은 AJAX를 통해 이루어 지므로 기록에 저장해야합니다. 페이지가 방문 기록에서로드되면 검색 쿼리 매개 변수가 양식에로드되어야합니다. 검색 양식과 검색 결과는 Backbone.View로 구현할 수 있습니다. 그러나, 나는 그들을 함께 붙이는 문제가있다.간단한 백본 검색 페이지 - 어떻게 처리합니까?

나는 컨트롤러가 필요하다고 생각합니다. 백본이 있습니다. 루터,하지만 올바른 장소입니까? AJAX 호출은 어디에 배치해야합니까?

해당 페이지의 구조에 대한 조언을 환영합니다.

답변

10

SearchModel을 만들 수 있습니다. SearchModel에는 "performSearch (string)"와 같은 메서드가 있습니다.이 메서드는 ajax 호출을 시작합니다. 호출이 반환 할 때이 모델은 같은 것을 할 수있는 :

this.set("searchResults", ajaxResult) 

을하고 뷰는 모델의 속성에 바인딩 할 수 있습니다 :

Backbone.View.extend({ 
    events: { 
     "submit": "formSubmitted" 
    }, 
    formSubmitted: function(e) { 
     this.model.performSearch(e.target.value); 
    } 
}); 
: 참조

// SearchResultsView 
Backbone.View.extend({ 
    initialize: function() { 
     this.model.on("change:searchResults", this.displayResults, this); 
    }, 
    displayResults: function(model, results) { 
     // do whatever... 
    } 
}); 

예를 들어 검색 양식보기

예 :

Backbone.Model.extend({ 
    performSearch: function(string) { 
     // fire your ajax request. provide a bound 
     // _searchComplete as the callback 
    }, 
    _searchComplete: function(results) { 
    this.set("searchResults", results); 
    } 
}); 
관련 문제