javascript - 列表列表列表的 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 个市场，并且它可能在不同的模板中(即 ListView 只有一个“最喜欢的”报价而不是整个契约(Contract)列表等)

我们没有使用路由，因为这些东西在前端是只读的，初始有效负载是通过 HTML 传递的，其余部分来自 WebSockets。

界面是高度可变的，例如:那里的两个单元格 (BUY/SELL) 可以是任意深度，即每边显示 3 个刻度。或者可能只显示一侧(可用的买入报价)。

我目前拥有的是市场、契约(Contract)和报价的 Backbone 模型。然后我有一个用于合约列表的 MarketContracts 集合，以及一个用于买入/卖出列表的 MarketDepthQuoteCollection(折叠为一个列表)。

市场 > 契约(Contract) > 报价层次结构与数据在 API 中的表示方式密切相关，因此这是不可协商的。

界面更新作为包含 JSON 结构的 WebSockets 消息登陆，例如:

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

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

有没有更好的方法来构建它并很好地吸引我所有的听众？理想情况下，我希望 Contracts 和 Quotes 监听 Market 模型更改以进行 self 更新，并且我需要轻松地将状态更改从 Websockets 传递到表中的每个 quote。

我也对 View 适合于此的哪些方面感到困惑，以使我的生活更轻松。

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

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

Answer 1

因此，您有一个市场集合；每个都有一组契约(Contract)；每个都有一组(或两个)报价。这似乎很合乎逻辑。您可以考虑使用 Backbone-relational .

我建议使用非常精细的 View 。由于 Market 包含 Contracts 的集合，您的 MarketView 将创建/显示 ContractViews 的集合。每个 ContractView 将创建/显示一个 QuoteViews 集合。

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

现在，将数据导入模型的方式可能需要一些适配器来解析它，因为您的数据会定期通过 websocket 获取(而且都是一大块)。通常，只有在需要新数据时，才会为某些模型或集合调用 fetch 模板方法。但是，只要您通过 set() 或 reset() 将新数据放入模型属性中，监听的 View 就会更新。

这里有一些不错的链接:

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