0

我正在为学习目的创建一个简单的 Backbone 应用程序。我只是在创建时间和日期显示。显示必须至少每分钟更新一次。我对模型使用“时间”，对视图使用“TimeView”。我的第一个问题是某种哲学问题，它包含 setInterval、模型还是视图？我认为模型应该自我更新，但我无法让代码工作。看起来它正在更新模型，但是 model.update() 到 view.render() 函数的绑定不起作用。

在下面的代码中，我将 setInterval 切换到 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();
4

1 回答 1

0

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

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

于 2012-05-25T20:41:45.000 回答