2

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

4

3 回答 3

4

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

也就是说，实施并不算太糟糕。

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

当然，您可以通过多种方式广播更新 - 即显式触发事件而不是seting 属性 - 但这是我上面描述的代码：

模型

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/

于 2013-05-10T15:17:09.313 回答
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()
于 2013-05-10T11:45:08.090 回答
2

我没有比定期检查更好的主意：

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
于 2013-05-10T00:05:29.190 回答