BackboneJS 날짜가 만료되면 모델 숨기기

Question

JSON 데이터를 기반으로 모델 컬렉션을 표시하는 백본 앱이 있습니다. JSON 데이터 안에는 endDate이 있는데 실시간 데이터를 제공합니다. 경쟁 모듈을 기반으로합니다. 내가 원하는 것은 주어진 날짜가 만료 되었다면 콜렉션에서 Model을 숨기거나 (심지어 제거 할 수도 있기 때문에) 경쟁이 더 이상 가능하지 않다는 것입니다.

지금까지 바닥에서 모델 내 competition.js은 다음과 같습니다 :

이

Competition.View = Backbone.View.extend({ 
    tagName: 'ul', 
    template: 'competition', 
    initialize: function() { 
     this.listenTo(this.model, 'sync', this.render);    
    }, 
    serialize: function() { 
     return this.model.toJSON(); 
    } 
}); 

Competition.CompetitionModel = Backbone.Model.extend({ 
    url: function() { 
     return App.APIO + '/i/contests'; 
    }, 
    comparator: function(item) { 
     return item.get('endDate'); 
    }, 

    defaults: { 
     "data": [] 
    } 
}); 

그런 다음 내 주요 모듈에, 나는 competition.js를 가져오고 여기에 내가 모델을 가져오고 그것을 렌더링 특정 HTML 요소에 (복사의 필요에/내 원래의 질문에 여기를 붙여 잘 모릅니다) :

그래서

function (App, Backbone, Competition) { 

    var CompetitionOverview = App.module(); 

    CompetitionOverview.View = Backbone.View.extend({ 
     template: 'competitionOverview', 
     initialize: function(){ 
      this.render(); 
     }, 
     beforeRender: function() { 
      var competitionModel = new Competition.CompetitionModel(); 
      this.insertView('.singleComp', new Competition.View({model: competitionModel})); 
      competitionModel.fetch(); 
     }, 

    }); 

    return CompetitionOverview; 
} 

, 어떻게 숨길 달성 할 수/만료 거슬러 올라가는 모델을 제거?

당신이 모델의 컬렉션을 미리 감사드립니다 ...

Answer 1

당신의 상태,하지만 Competition.CompetitionModel는 Backbone.Model 대신 Backbone.Collection 확장합니다. 내 대답에는 경쟁 모델이 Backbone.Collection이고 Backbone.Model이 아니라고 가정합니다. 또는

Competition.View = Backbone.View.extend({ 
    tagName: 'ul', 
    template: 'competition', 
    initialize: function() { 
     this.listenTo(this.model, 'sync', this.render);    
    }, 
    serialize: function() { 
     return this.model.toJSON(); 
    }, 
    render: function(){ 
      //dependending on in which format your date is you might have to convert first. 
      if(this.model.get('endDate') < new Date().getTime()){ 
       //render the view 
      } 
}); 

: 당신이 실제로 최종 날짜를 기준으로 뭔가를 표시할지 어떨지를 Competition.View 당신의 렌더링 기능에

1. 확인 : 말했다

   , 난 당신이 두 가지 옵션이 생각 , 그리고 나는 이것이 더 깨끗하다고 ​​생각합니다, 당신은 데이터가 서버에서 오는 즉시 날짜를 확인합니다. 콜렉션이 서버에서 가져올 때 백본이 컬렉션에 "추가"이벤트를 트리거한다고 생각합니다. 다시 한번 경쟁 모델을 경쟁 컬렉션으로 만들고 추가 이벤트를 듣습니다. 아래의 대답은이 문제를 해결하는 데 도움이 경우

   Competition.CompetitionModel = Backbone.Collection.extend({ 
       initialize: function() { 
        this.on("add", checkDate) 
       }, 
       checkDate: function(model, collection, options){ 
        //again, get the right conversion 
        //but here you should compare your end date with the expire date 
        if(model.get('endDate') < new Date().getTime()){ 
         this.remove(model.id); 
        } 
       }, 
       url: function() { 
        return App.APIO + '/i/contests'; 
       }, 
       comparator: function (item) { 
        return item.get('endDate'); 
       }, 
   
       defaults: { 
        "data": [] 
       } 
   });