2014-07-04 98 views
0

有一個基於php的RESTful web服務。目前,它只提供移動應用程序。我需要使用相同的API來構建Web應用程序。我認爲這將是一個基於BackboneJS的單頁應用程序。後端由Zend Framework 2驅動。RESTful php web服務和BackboneJS

我以前曾與BackboneJS合作過,但我是創建SPA的完整初學者。關注我的第一件事是,當請求一個新的「頁面」時,如何將所有模型和集合與單個請求同步到Web服務。例如,我的應用中的第一頁將是一個登錄頁面。這很清楚,在這一點上所有需要的數據將被加載到頁面中。但是,一旦用戶登錄,我需要將他重定向到儀表板,這是一個完全不同的頁面,具有不同的佈局和內容。我想到的一個解決方案是使用啓動頁面所需的API URL列表向Web服務發出特殊請求。該服務將解析請求並在內部爲每個API調用所需的控制器並準備響應。我不知道如何處理模板。使用單個請求提取所有必需模板的最佳方法是什麼?

我將不勝感激任何關於此主題的幫助和建議。

回答

0

我發現使用的骨幹路由器設置,其中通過在URL中圖示像這樣的網頁路徑:

routes: { 
    '*page' : 'page' 
} 

page: function (page) { 
    customEvent.trigger('router:changed:page', page); 
} 

這樣,你是射擊的事件說的網頁已更改,將作爲掛鉤爲其他視圖進行渲染和初始化。然後,您可以創建一個頁面模塊初始化正確的觀點,像這樣:

define(['backbone'], function (Backbone) { 
    var PageModule = Backbone.View.extend({ 
     el: $('#main'), // main container 

     initialize: function() { 
      this.listenTo(customEvent, 'router:changed:page', this.render); 
     }, 

     render: function (page) { 
      this.$el.empty(); // empty the view each time 

      switch(page) { 
       case 'dashboard': 
        // load dashboard view 
        break; 
       case 'other': 
        // load other view 
        break; 
      } 

      return this; 
     } 
    }); 
}); 

每個視圖然後加載可能需要的所有模板和子視圖像這樣。

define(['backbone', 'insertTemplate', 'collection'], function (Backbone, InsertTemplate, Collection) { 

     var DashboardView = Backbone.View.extend({ 
      // do your view magic in here but as you can see you have access to a template and collection but you could add as many items as required. 
     }); 

     return DashboardView; 
}); 

頁面模塊成爲一種工廠方法。

我建議看看像木偶或佈局管理器的框架,因爲它可以幫助很多。

這是一個粗略的例子,應該讓你思考。還有其他一些方法,但這是一個開始。