2011-12-20 3 views
3

私はbackbone.jsのチュートリアルを2〜3時間見てきましたが、私が気づいていないことを達成するためには、真剣な時間を費やすことなく達成したいと思っていることに、Backbone.jsはこのタスクの正しいフレームワークですか?

私のアプリは主に1ページとかなりAJAX重く基づいています。このページには、サーバーをポーリングして独自に更新するいくつかのUI要素があります。さらに、他のUIコンポーネントのいずれかで更新をトリガする可能性のあるイベントを検索する中央ポーリングメカニズムがあります。

私が考えているのは、これらの独立したURLをすべて1つに集約し、フロントエンドでそのURLだけを聞き取り、それぞれのイベントを適切なUI要素に委任することです。効果的には、私のフロントエンドのためのメッセージバスのようなものです。

妥当な骨格のようなサウンドですか?または私はそれのポイントを逃したことがありますか?

答えて

0

バックボーンは機能しますが、sproutcore 2.0とも呼ばれるember.jsもチェックします。バックボーンは自分の好みにあまりにも冗長で、ember.jsちゃんはそれを処理します。チェックはhttp://www.emberjs.com/です。

3

この場合、バックボーンは正常に動作するはずです。

セントラルイベントポーラーを作成します。これは(テストしていない)サーバーからのすべてのタイプのイベントを取得し、アプリケーションの残りの部分に公開:

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}); 
    } 
}); 

そして最後にしましょう

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")); 
    } 
}); 

セットアップするにはポーラーとビュー:

ビューには、モデルの変化を聞きます
var eventPoller = new EventPoller(); 
var stockModel = new StockModel({poller: eventPoller}) 
var stockView = new StockView({model:stockModel}); 
eventPoller.poll(); 

一般的なアドバイスは、バックボーンの学習に数日間の労力がかかることですが、ドキュメントを読み、基本的な例を追っていくと、スピードアップにつながります。

おそらく、バックボーンで最も混乱するものはthisです。 thisがどのように変更されるかを確認するには、アプリケーションを起動して、アプリケーションをデバッグすることをお勧めします。

関連する問題