Nice Backbone.js列表列表的表示

Question

我们刚刚开始使用Backbone，我正试图找到一种很好的方法来构建我的应用程序。

所以我们有一个基本上是交易平台的网络应用程序。在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（折叠为单个列表）。

市场＆gt;合同＆gt;引用层次结构与数据在API中的表示方式密切相关，因此不可协商。

接口更新为包含JSON结构的WebSockets消息，如：

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

因为这是在不使用二进制格式的情况下通过写表示数据的最紧凑方式。

有没有更好的方法来构建这个并且很好地捆绑所有听众？理想情况下，我希望收听市场模型更改的合同和报价自行更新，我需要轻松地将状态更改从Websockets移交到表中的每个引用。

我也对于视图适合这种情况感到困惑，以使我的生活更轻松。

有没有好的示例应用程序或建议？我一直在努力寻找信息。

编辑：这是我正在谈论的界面的屏幕抓图。它显示了整个市场和第二个市场的一部分：

Answer 1

所以，你有一系列市场;每个都有一系列合同;每个都有一个（或两个）行情。这似乎很合乎逻辑。您可以考虑使用Backbone-relational。

我建议使用非常精细的视图。由于市场包含一系列合约，因此您的MarketView将创建/显示一系列ContractView。每个ContractView都会创建/显示一组QuoteViews。

这样，当QuoteModel发生变化时，只需要更新QuoteView监听其变更事件。

现在，如何将数据导入模型可能需要一些适配器来解析它，因为您的数据是通过websocket定期传递的（并且所有数据都在大块中）。通常，只有在需要新数据时，才会为某些模型或集合调用fetch模板方法。但是，只要通过set（）或reset（）将新数据输入到模型属性中，侦听视图就会更新。

以下是一些很好的链接：

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