Nice Backbone.js列表清單列表

Question

我們剛剛開始使用Backbone，並試圖通過一種很好的方式來構建我的應用程序。

所以我們有一個基本上是交易平臺的Web應用程序。在ASCII藝術，接口（和數據），看起來是這樣的：

Market name 

------------------------------------ 
Contract 1 | 12/$100 | 15/$150 | 
------------------------------------ 
Contract 2 | 40/$400 | 42/$650 | 
------------------------------------ 
Contract 3 | 46/$620 | 47/$700 | 
------------------------------------ 

其中每個合同是市場的一個孩子，兩個小區旁邊的每個合同都是當前買入和賣出的價格和「量「（可用金額）。每頁可能有超過1個市場，它可能在不同的模板中（即列表視圖只有一個「最喜愛」的報價而不是整個合同列表等）。

我們沒有使用因爲這些東西在前端是隻讀的，所以初始有效載荷是通過HTML進行的，其餘部分來自WebSockets。

該界面高度可變，例如：那裏的兩個單元（BUY/SELL）可以是任意深度，即每邊顯示3個刻度。或者可能只顯示一面（可用的買入報價）。

我目前得到的是市場，合同和報價的骨幹模型。然後，我有一個MarketContracts集合用於合約列表，還有一個MarketDepthQuoteCollection用於買入/賣出列表（摺疊爲單個列表）。

市場>合同>報價層次結構與數據在API中的表示方式緊密相關，因此這是不可協商的。

更新到接口土地作爲含有像JSON結構的WebSockets消息：

{marketid: [{contractid: [[buy quotes], [sell quotes]]}],...} 

因爲這是代表了寫入數據而不使用二進制格式的最緊湊的方式。

有沒有更好的方法來構建這個並很好地綁定我的所有聽衆？理想情況下，我希望合同和報價監聽市場模型更改以更新自己，並且我需要輕鬆地將狀態更改從Websockets更改爲表中的每個報價。

我也很困惑在哪裏視圖適合這個，使我的生活更輕鬆。

有沒有好的示例應用程序或建議？我一直在努力尋找信息。

編輯：這裏是我正在談論的界面的屏幕抓圖。它顯示了二級市場的一個整體市場和部分：

Answer 1

所以，你有市場的集合;每個都有一系列合同;每個都有一個（或兩個）行情集合。這看起來很合理。你可以看看使用Backbone-relational。

我建議使用漂亮的粒度視圖。由於市場包含一系列合約，您的MarketView將創建/顯示一系列ContractView。每個ContractView將創建/顯示一系列QuoteViews。

這樣，當QuoteModel發生變化時，只有QuoteView監聽其更改事件才需要更新。因爲你的數據是通過websocket定期發送的（而且都是大塊的），現在，你如何將數據存入你的模型可能需要一些適配器來解析它。通常情況下，只有在需要新數據時，纔會爲某個模型或集合調用獲取模板方法。但是，只要通過set（）或reset（）將新數據導入到模型屬性中，視圖偵聽就會更新。

這裏有一些很好的鏈接：

http://aaronhardy.com/javascript/javascript-architecture-backbone-js-views/ https://github.com/addyosmani/backbone-fundamentals