Backbone.js 양식의 값이 기록에 저장되었습니다.

Question

저는 백본 전체에 대해 전혀 익숙하지 않습니다. (사실 저는 아직 JavaScript 프로그래머가 많지 않습니다.) 필터 폼에 문제가 있습니다.

기본적으로 내 백본 컬렉션이 채워지는 데이터베이스가 있습니다. 이 페이지에는 "Jobstatus : Running, Completed, Failed, ..."또는 "User name : test0"과 같은 입력 사항을 체크 할 수있는 필터 섹션이 있습니다. 내 결과 페이지 매기기를 시작할 때까지 모든 것이 훌륭합니다.

라우터를 # page/: 페이지를 처리하도록 설정했습니다. 이것은 잘 작동합니다. 2 번 페이지로 가면 2 번 페이지로 간다. 그리고 2 번 페이지에서 navigate (page/1)를 사용하여 1 번 페이지로 결과를 다시 설정하는 필터를 확인한다. 뒤로 버튼을 클릭하면 2 페이지로 돌아갑니다 (내 필터 결과가 마지막에 없었기 때문에).하지만 필터 상자는 계속 선택되어 있습니다.

페이지 당 10 개의 행이 있고 필터가없는 결과가 14 개인 경우. 2 페이지로 이동하여 결과 11-14를보고 5 페이지의 결과로 총 1 페이지를 반환하는 필터를 확인한 다음 다시 조회합니다. 나는 지금 2 페이지에서 5 행 중 11-5 행을 보았습니다 ...

어쨌든 양식 체크 박스와 다른 입력을 기억하는 기록이 있습니까? 따라서 제가 설명한 상황에서 다시 돌아 가면 2 페이지로 이동하지만 이전에 폼 필터를 제거하면됩니다.

나는 폼의 모든 값에 대해 경로를 사용해야한다고 생각했지만,이 작업을 수행하는 더 좋은 방법이 있기를 바란다. (잘하면 전체 코드를 다시 작성하지 않고).

도움을 주시면 감사하겠습니다.

입력을위한 두 개의 기본보기가 있습니다. 하나는 필터 양식에 연결되고, 하나는 페이지 매김 선택에 사용됩니다. 필터 양식보기는 결과에 대한 다른 뷰 (행 모음과 연결됨)를 호출합니다.

var FilterForm = Backbone.View.extend({ 
      events: { 
       "submit": "refreshData", 
       "change input": "refreshData" 
      }, 
      initialize: function() { 
       this.refreshData(); 
      }, 

      refreshData: function() { 
       Backbone.history.navigate('page/1'); 
       pageNumberModel.set('pageNumber', 1); 

       this.newPage(); 
      }, 
      newPage: function() { 
       var pageNumber = pageNumberModel.get('pageNumber'); 
       var rowsPerPage = pageNumberModel.get('rowsPerPage'); 
       var startRow = ((pageNumber * rowsPerPage) - rowsPerPage) + 1; 
       var endRow = startRow + (rowsPerPage - 1); 

       $('#startrow').val(startRow); 
       $('#endrow').val(endRow); 

       var inputData = this.$el.serializeArray(); 
       var inputDatareduced = _(inputData).reduce(function (acc, field) { 
        acc[field.name] = field.value; 
        return acc; 
       }); 

       $.get("Database.aspx", inputData, function (outputData) { 
        jobQueueRows.set($.parseJSON($.parseJSON(outputData)['JobQueue'])); 
        jobQueueRowsView.render(); 

        pageNumberModel.set($.parseJSON($.parseJSON(outputData)['Pagination'])); 
        pageNumberView.render(); 
        rowNumberView.render(); 
       }); 
      } 
     }); 

Answer 1

나는 당신의 FilterForm보기 위해 filterModel를 만들고 상태를 유지하는 것을 사용하는 것이 좋습니다 것 : 여기

은 필터의 형태이다. 다음은 참조 구현입니다.

FilterModel :

filterClicked: function (e) { 
    var filter = $(e.target); 
    if(filter.is(':checked')) 
    this.model.applyFilter(filter.attr("id")); 
    else 
    this.model.removeFilter(filter.attr("id")); 
}, 

이 확인란 때 모델 상태를 적용하는 필터 템플릿을 수정하여보기에서 핸들러가 필터 모델을 업데이트 할

var FilterModel = Backbone.Model.extend({ 
    initialize: function(){ 
    if(!this.get('filters')) 
     this.set({filters: new Array()}); 
    }, 
    applyFilter: function(key){ 
    var filters = this.get("filters"); 
    set("filters", _.union(filters, key)); 
    return this; 
    }, 
    removeFilter: function(key){ 
    var filters = this.get("filters"); 
    set("filters", _.without(filters, key)); 
    return this; 
    }, 
    defaults: { 
    fooFilters: [ 
    {key: "size", label: "Filter By Size"}, 
    {key: "color", label: "Past Week"}] 
    } 
}); 

바인딩 렌더링 :

<ul id="fooFilters" class="foo-filter-list"> 
    <% _.each(fooFilters, function(f) { %> 
    <li> 
    <label for="<%=f.key%>"><%=f.name%></label> 
    <input type="checkbox" name="" value="" id="<%=f.key%>" <%if($.inArray(f.key, filters) === -1 {%>checked<%}%>/> 
    </li> 
<% }); %> 
</ul>