当前日期发生变化时触发Backbone.js事件

Question

当前日期（只是一天，而不是时间）发生变化时，是否有简单的方法来触发Backbone.js事件？

Answer 1

我根本就没有定期检查一个更好的主意：

var lastCheckedDate = new Date(); 
setInterval(function() { 
    var d = new Date(); 
    //TODO: check whether the day in d and lastCheckedDate are the same or not 
    //TODO: if not, trigger event 
    lastCheckedDate = d; 
}, 10000); //this will check in every 10 seconds 

Answer 2

您可以创建一个扩展骨干事件这样的构造：

var Clocks = function(){}; 

_.extend(Clocks.prototype, Backbone.Events, { 

    start: function() { 
    this.timer = setInterval(_.bind(this.tick, this), 1000); 
    return this; 
    }, 

    tick: function() { 
    this.trigger('tick', new Date) 
    }, 

    stop: function() { 
    this.timer && clearInterval(this.timer); 
    return this; 
    } 

}); 

，然后用它在骨干模型更新它属性：

var ClocksModel = Backbone.Model.extend({ 

    defaults: function() { 
    var date = new Date 
    return { 
     date: date.getDate(), 
     seconds: date.getSeconds() 
    } 
    }, 

    initialize: function() { 
    this.clocks = new Clocks; 
    this.clocks.on('tick', this.updateDate, this) 
    }, 

    updateDate: function (date) { 
    this.set('date', date.getDate()) 
    this.set('seconds', date.getSeconds()) 
    }, 

    start: function() { 
    this.clocks.start(); 
    return this; 
    }, 

    stop: function() { 
    this.clock.stop(); 
    return this; 
    } 

}); 

然后你就可以：

clocks = new ClocksModel; 
clocks 
    .on('change:seconds', function(model, newSeconds) { 
    console.log('seconds changed to ', newSeconds) 
    }) 
    .on('change:date', function(model, newDate) { 
    console.log('date changed to', newDate) 
    }) 
    .start() 

Answer 3

所以，这个问题的答案 - 有没有滚动自己的解决方案没有简单方式。

这就是说，实现并不算太坏。

这里的想法是，你有一个'天'属性的模型。在初始化模型时，我们将调用一个初始化器来确定持续到“明天午夜”的持续时间。在午夜之后，setTimeout将被调用，它将更新模型的'day'属性。在视图本身中，我们倾听“天”属性的更改。一旦该属性更新，我们将重新初始化更改日期的方法。这样就没有轮询，并且一旦日期发生变化，你的事件就会被触发。

当然，有许多方法，你可以广播的更新 - 即明确触发，而不是set荷兰国际集团的财产的事件 - 但这里是为了什么，我上述的代码：

模式

var Model = Backbone.Model.extend({ 
    defaults: function(){ 
     var d = new Date(); 
     return { 
      day: d.getDay() 
     } 
    }, 
    initialize: function(){ 
     _.bindAll(this, '_init_date_trigger'); 
     this._init_date_trigger(); 
    }, 
    _init_date_trigger: function(){ 
     var now = new Date(); 
     var midnightTomorrow = new Date(); 
     midnightTomorrow.setDate(now.getDate() + 1); 
     midnightTomorrow.setHours(0,0,0,0); 
     var msTillTomorrow = midnightTomorrow - now + 1; 
     var me = this; 
     console.log("date will be changed in " + msTillTomorrow); 
     setTimeout(function(){ 
      me.set("day", new Date().getDay()); 
      me._init_date_trigger(); 
     }, msTillTomorrow); 
    } 
}) 

查看

var View = Backbone.View.extend({ 
    template:_.template("The day is: <span class='day'> <%= day %> </span>"), 
    initialize: function(){ 
     this.model.on("change:day", this.render); 
    }, 
    render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

实施

var myModel = new Model(); 
var myView = new View({model: myModel}); 
$("#example").html(myView.render().el); 

这里的小提琴：http://jsfiddle.net/6KGzt/4/