1

백본을 처음 사용하고 내 레일 응용 프로그램에서 백본을 사용하고 있습니다. 내 응용 프로그램에서 내가하고있는 것입니다.백본 페이징 담당자 클릭 이벤트

내 응용 프로그램에서 페이지 매김 지원을 위해 Gmap을 사용하고 있습니다. 페이지 매김을 사용하여 서버에서 5 개의 레코드를 표시하고 해당 메시지를 표시 할 때마다 5지도보기의 위치이므로 이제는 페이지 매김 된 링크 (이전 페이지, 다음 페이지)를 클릭 할 때지도의 나머지 위치를 표시해야합니다. 일부 클릭 이벤트를 작성해야한다고 생각하지만 글을 쓸 위치와 위치가 확실하지 않습니다. 이 사건을 쓰는 방법, 아무도 나를 도와주세요. 내가 evnets를 작성한 그러나 그 사전에

감사

을 작동하지 않습니다 아래의 코드를 검토하십시오

var Listings = Backbone.PageableCollection.extend({ 
    model: Bdemo.Models.Listing, 

    mode: "server" , 

    url: '/listings' , 

    events: { 
     "click #paginationSelect" : "fetchSelectedData" 
    }, 

    fetchSelectedData: function(){ 
     console.log("CAMEEEEEEEEEEEEEEEEEEEEEEEEEEE") 
    }, 

    // Initial pagination states 
    state: { 
     pageSize: 3, 
    /* sortKey: "updated",*/ 
     order: 1 
    }, 


    queryParams: { 
     totalPages: null, 
     totalRecords: null, 
     sortKey: "sort" 
    }, 



    parseState: function (resp, queryParams, state, options) { 
     return {totalRecords: resp.total_pages}; 
    }, 


    parseRecords: function (resp, options) { 
     return resp.listings; 
    } 

    }); 
+0

적어도 기존 코드를 제공하십시오. – apneadiving

답변

0

안녕 마침내 Backbone.PageableCollection에서 (callGmap) 내 자신의 함수를 호출하여이 문제를 해결, 여기 내 새로운 코드입니다

var Listings = Backbone.PageableCollection.extend({ 
    model: Bdemo.Models.Listing, 

    mode: "server" , 

    url: '/listings' , 

    events: { 
     "click #paginationSelect" : "fetchSelectedData" 
    }, 

    fetchSelectedData: function(){ 
     console.log("CAMEEEEEEEEEEEEEEEEEEEEEEEEEEE") 
    }, 

    // Initial pagination states 
    state: { 
     pageSize: 3, 
    /* sortKey: "updated",*/ 
     order: 1 
    }, 


    queryParams: { 
     totalPages: null, 
     totalRecords: null, 
     sortKey: "sort" 
    }, 



    parseState: function (resp, queryParams, state, options) { 
     return {totalRecords: resp.total_pages}; 
    }, 


    parseRecords: function (resp, options) { 
     callGmap(resp.hash); 
     return resp.listings; 
    } 

    }); 
+0

IMO 컬렉션을 바인드하는 것은 좋지 않습니다. DOM 요소에 의해 트리거 된 이벤트 이것이 바로 백본 관점입니다. 어쨌든 자신의 질문에 대답 한 경우 대답으로 표시해야합니다. – burtyish

+0

오 .. 감사합니다 ..하지만 위의 코드에서 이벤트 기능을 작성할 수 있습니까? 필자는 작성했지만 작동하지 않았습니다 ... – ratnakar

0

@ratnakar :

당신이 필요로하는 모든 이벤트 기능입니다. 페이지가 매겨진 링크마다 ID를 설정하십시오. 그런 다음 events 함수를 포함하십시오. SPA (단일 페이지 응용 프로그램)를 개발하고 싶습니다. 그 메모와 함께 다음과 같은 설정을 가정합니다.

homeview.js ("templates"폴더) 페이지에는 바닥 글 태그로 묶인 페이지 매김 링크가 포함되어 있습니다.

<footer> 
    <button id="prevPage">previous</button> 
    <button id="nextPage">next</button> 
</footer> 

는 해당 homeview.js로 이동 파일 ("뷰"폴더)

backboneApp.Views.homeview = Backbone.View.extend({   

//Default "events" function for handling delegate events. 
events:{ 

    //catching click events 
    "click #prevPage" : "goPrevious" //on click of DOM which has id as prevPage, calling a function goPrevious. 
    "click #nextPage" : "goNext" //same as above call goPrevious function. 
}, 

//Defining the user created function goPrevious and goNext. 

goPrevious: function(){ 
    //Make your server call here.... for the previous 5 records. 
    }, 
goNext: function(){ 
    // server call here for the next 5 records. 
    } 

}); 

이 따라서 페이지가 매겨진 링크에 대한 위임 이벤트를 사용의 기본 아이디어는 위의 정의를 볼 수 있습니다.

+0

제 경우에는 인덱스보기를 렌더링하지 않습니다. 백본 템플리트를 사용하여, 그냥 백본 페이징 기 (backbone paginator)를 사용하여 렌더링하는 것입니다 ... 백본 인덱스 템플리트가 아닌 백본 페이징 기와 함께 마술을해야합니다. 회신 해 주셔서 감사합니다. – ratnakar

0

질문에서 서버 모드에서 backgrid-paginator를 사용하고있는 것으로 알고 있습니다.

데이터에 액세스하기 전에 서버에서 모델을 가져 왔는지 확인해야하므로 click 이벤트에 바인딩 할 수 없습니다.

당신은 당신의보기에서 xhr.done()

에 컬렉션 'request 이벤트 행동에 결합 할 수 있습니다

initialize: function() { 
    this.listenTo(this.record_collection, "request", this.onCollectionRequested); 
}, 

onCollectionRequested: function(collection, xhr, options) { 
    _this = this; 
    xhr.done(function(){ 
     _this.showRecordLocationsOnMap(collection); 
    }) 
}, 

showRecordLocationsOnMap: function(records) { 
    /* Update your map here */ 
} 
+0

예 backgrid paginator를 사용하고 있습니다. – ratnakar