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