backbone.js應用程序視圖切換？

我正在使用Backbone爲我的RESTful API寫一個前端...我真的很喜歡它。學習這個框架仍然是超級有趣的。但是，至少我認爲這應該是直截了當的。backbone.js應用程序視圖切換？

我現在有一個（也是唯一的）html頁面，主應用程序所在的頁面列出了一個或多個產品。並且，讓我們說它駐留在這裏：http://localhost/index.html

我希望能夠從產品列表視圖切換到新產品視圖（通過頂部按鈕上的點擊事件）。而且，據我所知，我需要開始使用路由器進行切換，使用How to switch views using Backbone.js中描述的模式進行切換。

視圖切換什麼我需要做什麼來實現這種行爲？
這看起來好笑：
```
http://localhost/index.html#product/new
```
而且，因爲我使用[tornado]（http://tornadoweb.org）作爲我的API和靜態內容的Web服務器，所以我不能只實現一個重寫輕鬆規則。我可能會在不久的將來轉向使用nginx進行靜態內容，但我還沒有。如果我使用路由器切換視圖從[R EVIEW至Ç reate（的CRUD操作）會像時，我該如何改變URL/URI看更多的東西沿着這
```
http://localhost/product/new
```
線

2012-09-03 bitcycle

爲了接收無哈希的url更改，您的瀏覽器必須支持pushstate。如果我沒有弄錯，如果你的瀏覽器不支持pushstate，Backbone將回退到使用哈希值。你會，以便在應用程序中使用pushState的下列初始化路由器：

Backbone.history.start({pushState: true})

我喜歡@ alexanderb的使用角度切換。只需確保在您更改視圖時正確處理它們。否則，你會遇到一些難以調試的複雜問題。閱讀更多here。

來源

2012-09-03 14:33:54 TYRONEMICHAEL

謝謝你。這是一個很好的解釋！ – bitcycle

是的，你需要2件東西 - 路由器和ApplicationViewManager（某些類，它負責改變視圖）。

define(function() { 

var ViewManager = function() { 
    return { 
     show: _showView 
    }; 
}; 

function _showView(view) { 
    if (this.currentView) { 
     this.currentView.close(); 
    } 

    this.currentView = view; 
    this.currentView.render(); 

    $("#app").html(this.currentView.el); 
} 

return ViewManager;

}）;

在路由器，你這樣做：

// router 
var ApplicationRouter = Backbone.Router.extend({ 

    initialize: function() { 
     this.viewManager = new ViewManager(); 
    }, 

    routes: { 
     '': 'dashboard', 
     'configure/sites/:id': 'configure' 
    }, 

    dashboard: function() { 
     var app = require('./apps/DashboardApp'); 
     app.run(this.viewManager); 
    }, 

    configure: function (id) { 
     var app = require('./apps/ConfigureApp'); 
     app.run(id, this.viewManager); 
    } 

});

的某些代碼示例，你可以從這個repository。

來源

2012-09-03 08:32:09

backbone.js應用程序視圖切換？

回答

相關問題