Question

我正在创建一个简单的Backbone应用程序用于学习目的。我只是创建一个时间和日期显示。显示器必须至少每分钟更新一次。我正在为模型使用“Time”，为View使用“TimeView”。我的第一个问题是类型哲学，它包含setInterval，Model或View？我认为模型应该自我更新，但我无法使代码工作。看起来它正在更新模型，但是model.update（）与view.render（）函数的绑定不起作用。

在下面的代码中，我将setInterval切换到View并注释掉了我的另一个尝试。即使这样可行，（也许View 应该控制模型的更新）但是this.model.bind（'update'，this.render）不起作用，我必须启动单独渲染哪个感觉不对。

var Time = Backbone.Model.extend({
initialize: function(){
    _.bindAll( this, 'update', 'startLoop', 'stopLoop' );
    //this.startLoop();
    this.update();
},
startLoop: function(){
    this.update();
    this.interval = window.setInterval(_.bind(this.update, this), 10000);

},
stopLoop: function(){
    this.interval = window.clearInterval( this.interval );
},
update: function(){
    var days = [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ];
    var months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
    var date = new Date();
    var tHour = date.getHours();
        if( tHour < 12 ){ if( tHour == 0 ) tHour = 12 } else { tHour = tHour-12 };
        tHour = tHour.toString();
    var tMin = date.getMinutes();
        tMin = ( tMin < 10 ) ? '0' + tMin.toString() : tMin.toString(); 
    this.set({
        hour : tHour,
        ampm : ( date.getHours() < 12 ) ? "am" : "pm",
        minute : tMin,
        day : days[ date.getDay() ],
        month : months[ date.getMonth() ],
        date : date.getDate(),
        year : date.getFullYear()
    });
}
});
var TimeView = Backbone.View.extend({
el: '#time-date-display',
interval: 0,
template: $( '#tpl-time-date' ).html(),
initialize: function(){
    _.bindAll( this, 'render' );
    this.model = new Time();
    this.render();
    //this.model.bind( 'update', this.render );
    this.interval = window.setInterval( _.bind( function(){ this.model.update(); this.render();}, this), 10000 );
},
render: function(){
            //alert( 'TimeView.render()' );
    $( this.el ).html(
        _.template( this.template, this.model.toJSON())
    );
}
});

$( 'body' ).append( _.template( $( '#tpl-time-weather-display' ).html()));
var tv=new TimeView();

Answer 1

您绑定到模型上的update事件，但该事件永远不会被触发。在模型上调用update与生成的update事件不同。相反，绑定到模型的change事件，然后视图将被更新。

关于哲学问题，我会选择随时间更新的模型，但这个例子是如此做作，几乎是任意的。

Backbone.js模型，正确添加setInterval

1 个答案: