当日期过期时，BackboneJS隐藏模型

BackboneJS Hide Model when date has expired

本文关键字：BackboneJS 隐藏 模型 日期 过期      更新时间：2023-09-26

我有一个骨干应用程序，在那里我显示基于JSON数据的模型集合。在JSON数据中，我有endDate——它提供了实时日期。它是基于一个竞赛模块。我想要实现的是，如果给定的日期已经过期，我想要从集合中隐藏(甚至可能删除)模型，以便竞争不再可用。

到目前为止，我的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;
}

那么，我如何实现隐藏/删除日期已过期的模型?

您声明您有模型集合，但是您的Competition.CompetitionModel扩展了Backbone.Model而不是Backbone.Collection。在我的回答中，我假设CompetitionModel是Backbone.Collection而不是Backbone.Model。

也就是说，我认为你有两个选择:

  1. 检查Competition.View的渲染函数是否应该实际显示基于结束日期的内容:

    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
          }
});

  2. 或者，我认为这更简洁，当数据从服务器传入时检查日期。我认为当从服务器获取集合时，主干会在集合上触发一个"添加"事件。所以，再一次，让你的Competition Model成为一个Competition Collection并收听add事件。把

    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": []
    }
});
相关文章：