Question

我有一个Backbone App，我在其中显示基于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;
}

那么，如何隐藏/删除日期已过期的模型？

提前感谢...

Answer 1

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

那就是说，我认为你有两个选择：

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

或者，我认为这样更干净，一旦数据从服务器进入，您就会检查日期。我认为，当从服务器获取集合时，backbone会在集合上触发“添加”事件。因此，再次将您的比赛模型作为竞赛集合，并听取添加事件。改变

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": []
    }
});

BackboneJS在日期到期时隐藏模型

1 个答案: