當前日期發生變化時觸發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/