2012-01-05 3 views
3

최근에 Backbone.js로 개발하기 시작했습니다. 이 응용 프로그램에서는 날짜, 상태 등 복수형 필터로 많은 행을 필터링 할 수있는 화면이 있습니다.히스토리 탐색시 SPA가 아닌 응용 프로그램의 Backbone.js가 발생했습니다.

문제는 SPA (단일 페이지 응용 프로그램)가 아니지만 사실 Backbone.js를 사용하는 단일 페이지. 따라서 다른 페이지에서는이 프레임 워크를 사용하지 않습니다. 이 두 경로 (/rows/rows/search/:params)에서만

이러한 경로를 탐색 할 때 문제가 없습니다.로드 중이며 완벽하게 작동합니다. 예를 들어 /login을 탐색하면 전체 페이지를 새로 고친 후 내역 뒤로 버튼을 클릭하면 문제가 발생합니다. 리턴 버튼을 누를 때 Model.fetch 메소드가 호출 한 마지막 JSON이 표시됩니다.

몇 가지 시도해 보았습니다. 백본의 방법을 가져 오지 못했을 수도 있습니다.

먼저,이 경로에서 pushState를 사용하려는 앱에 우선 Backbone.history.start({root: '/rows'});을 입력 해 보았습니다. 같은 오류가 발생했습니다.

그럼 내가보기에 pushState를 처리하는 방법이 될 수도 있지만. 그래서,이 방법을 수행합니다 나는 또한 Backbone.history.navigate에 대한 window.location.hash을 변경하려고

App.View.Rows = Backbone.View.extend({ 
    el: $(document.body), 
    events:{ // my events }, 
    initialize: function() { 
    this.model = new App.Collection.Model(); 
    this.model.bind('reset', this.render, this); 
    }, 
    submitForm: function(ev) { 
    ev.preventDefault(); 
    this.search(ev); 
    return false; 
    }, 
    openFilters: function() { 
    var el = this.el.find('div.box_content'); 
    if (!el.is(':visible')) el.slideDown(); 
    }, 
    resetFilters: function() { 
    window.location.hash = "/rows"; 
    }, 
    populate: function(opts) { 
    var opts = opts || (opts = {}); 
    if (this.lastFetch) this.lastFetch.abort(); 
    this.lastFetch = this.tasks.fetch({data: opts}); 
    }, 
    render: function() { 
    // logic to render results 
    }, 
    search: function(ev) { 
    this.doSearch(this.getFilterOptions()); 
    }, 
    getFilterOptions: function() { 
    var opts = //get url params 
    return opts; 
    }, 
    doSearch: function(opts) { 
    window.location.hash = '/rows/search/' + $.param(opts); 
    } 
}); 

,하지만 오류가 여전히 남아 있었다. 사실 Backbone.history.navigate이 첫 번째 시도 였으므로 window.location.hash로 변경되었습니다.

내 컬렉션은 일반적인 것이며, url 매개 변수 만 지정되며 쿼리 문자열을 통해 검색됩니다.

그래서, 얘들 아, 어떻게 될 수 있니? 왜 역사가 돌아 왔을 때 Backbone.js 라우터를 실행하는 대신 JSON이 표시됩니까? 이 문제를 어떻게 해결할 수 있습니까? Backbone.js를 SPA 대신 단일 페이지에 넣을 수 있습니까?

+0

다음과 같은 상태를 가정 해 보겠습니다./rows ->/rows/search/foo ->/login. 이제 뒤로 버튼을 클릭하면 URL로 무엇이 표시됩니까? –

+0

'Rows.fetch()'에 의해 실행 된'/ rows? q = foo' ajax 요청에 의해 반환 된 화면에 JSON이 인쇄되어 있습니다. – gustavotkg

+0

그냥 내 질문에 답하기 위해서 : 내 URL은'rows/search/foo 다시. 그러나, 다음과 같은 상태에서 :/행 ->/행/검색/foo ->/행/검색/막대를 누른 다음 다시 버튼을 잘 작동합니다. 문제는 no-backboned.js-page를로드하는 것입니다. – gustavotkg

답변

1

사용자 의견에 추가 정보를 기반으로하면/rows/search/foo는 서버 측을/rows? q = foo로 라우팅합니다. pushState를 해제하십시오.

사용

Backbone.history.start()

대신

Backbone.history.start의 ({pushState : TRUE})

행동은 이제 다음 고정되어있는 경우 이는 서버 측 라우팅 문제입니다. pushState를 계속 사용하려면 '/ 행'으로 시작하는 모든 URL (예 :/행/검색/foo)이 '/ 행'과 동일한 HTML을 반환하는지 확인해야합니다. 이는 물론 Ajax 요청에 다른 URL 패턴 (예 :/rows? q = foo 대신/api/rows? q = foo)을 사용해야한다는 것을 의미합니다.

+0

동작이 수정되지 않았습니다. 뭔가가 일어나고있어. 설명 주셔서 감사합니다! – gustavotkg

+0

나는 그것을 고쳤다, 나는 그것이 URL 경로 문제라고 생각한다.아약스와 푸시 스테이트 URL이 같은 경우이 문제가 발생합니다. 감사! – gustavotkg

+0

감사합니다. 조니, 내 하루를 구했다! –

관련 문제