同时对 Backbone.js 中 Collection 的 ListView 重新编号

发布于 2024-10-10 12:55:15 字数 432 浏览 0 评论 0原文

我正在使用backbone.js,并且我有(1)一个包含集合中项目的列表视图,以及(2)一个包含集合中项目标记的地图。 ListView 和标记都经过编号,以便用户知道列表视图中的哪个项目对应于哪个标记。

这是一个允许用户添加和删除位置的视图,因此我需要对每个添加和删除事件上的列表和标记重新编号。例如。

集合:[1, 2, 3, 4, 5]

删除:[3]

重新索引前的集合:[1, 2, 4, 5]

重新索引的集合:[1, 2, 3, 4]

...然而,这里有一个问题,列表中的数字需要与地图上各自的标记相匹配。

这样做的最佳方法是什么?我是否应该有一个视图同时控制列表视图和地图并执行重新索引,或者我应该有一个列表视图和一个地图视图,并让它们都监听模型的更改。如果我使用两个视图选项,如何确保重新索引后列表视图项目和标记的编号正确?

I'm using backbone.js and I have (1) a list View with the items in a collection, and (2) a map with markers for the items in the collection. The ListView and Markers are numbered so the user knows which item in the list view corresponds to which marker.

This is a view that allows users to add and remove locations, thus I need to renumber the list and markers on each add and remove event. For example.

collection: [1, 2, 3, 4, 5]

remove: [3]

collection before re-indexed: [1, 2, 4, 5]

collection re-indexed: [1, 2, 3, 4]

....however, here's the catch, the numbers in the list need to match their respective markers on the map.

What is the best way to go about doing this? Should I have one view that controls both the list view and map at the same time and performs the re-indexing or should I have one view for the list and one for the map and have them both listen for changes to the model. If I go with the two-views options, how to I make sure that the list-view items and markers are numbered correctly after re-indexing?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我纯我任性 2024-10-17 12:55:15

您应该将两个不同的视图附加到同一个集合。

为了防止您需要任何手动编号和簿记,您可以使用集合中模型对象的索引作为标识符。

这样,您的地图标记和列表项将自动始终获得相同的标识符。

You should have two different views attached to the same collection.

To prevent your from needing any manual numbering and bookkeeping, you could use the index of the model object in the collection as your identifier.

This way, your map marker and your list item will automatically always get the same identifier.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文