backbone.js - Backbone.js 是完成这项任务的正确框架吗？

Question

我已经看了几个小时的 backbone.js 教程，如果不花一些认真的时间去找出它是否适合我想要实现的目标，我无法下定决心。

我的应用程序主要基于一个页面，而且 AJAX 相当繁重。此页面上有几个 UI 元素，它们正在轮询服务器并独立更新自己。此外，还有一个中央轮询机制寻找可能触发任何其他 UI 组件更新的事件。

我正在考虑的是将所有这些独立的 URL 聚合为一个，让我的前端仅监听该 URL，然后将每个事件委托(delegate)给适当的 UI 元素。实际上，它有点像我前端的消息总线。

听起来像是对 backbone 的合理使用？还是我错过了重点？

Answer 1

对于这种情况，Backbone 应该可以正常工作。

创建一个中央事件轮询器。这从服务器获取所有类型的事件并将它们发布到应用程序的其余部分(未测试):

var EventPoller = Backbone.model.extend({
    url: "events/",

    poll: function(){
        this.fetch({
            success: function(self, response){
                self.handleEvents(response);
                self.poll();
            }, error: function(self){
                self.poll();
            }
        })
    },

    handleEvents: function(events){
        var self = this;
        $(events).each(function(index, event){
            self.trigger(event.name, event.data);
        });
    }
}); 

然后你可以让几个模型监听这些事件:

var StockModel = Backbone.Model.extend({

    initialize : function() {
        this.poller.bind('stockChange', this.changeStock, this);
    },

    changeStock: function(stock){
        this.set({name: event.name});
    }
});

最后让 View 监听模型中的变化:

var StockView = Backbone.View.extend({

    initialize : function() {
        this.model.bind('change:name', this.updateStock, this);
        //this.poller.bind('stockChange', this.updateStock, this); //you could also listen for poll events directly in view with out having a model for each view.
    },

    updateStock: function(){
        $(this.el).html(model.get("name")); 
    }
});

设置轮询器和 View :

var eventPoller = new EventPoller();
var stockModel = new StockModel({poller: eventPoller})
var stockView = new StockView({model:stockModel}); 
eventPoller.poll();

一般的建议是，backbone 需要花几天的时间来学习，但如果你阅读文档并遵循一些基本示例，你就会快速上手。

也许与主干最混淆的是这个。我建议使用 firebug 并通过应用程序进行调试以查看 this 的变化。