javascript - 在 Laravel PHP 中创建一个受 WordPress 启发的媒体库

Question

目前我正在开发 Laravel 框架中的媒体库。
我从用户体验的 Angular 来看 WordPress。
媒体库选项卡显示您可以选择的图像。

我在“插入媒体”

中检查了两个图像(Shift + 单击)

我切换到“特色图片”并检查特色图片的一张图片。

当我切换回插入媒体时，它会记住之前选择的两个图像并忘记选中的特色图像。

WordPress 如何“记住”在“插入媒体” View 中检查了哪些图像。这是他们使用存储在模型中的一些数据的主干 View 吗？因为每次我在插入媒体和特色图片之间切换时， UL元素正在改变它的 id属性: (__attachments-view-xxx) .

当我只使用普通的 javascript 时，我可以将一些 ID 放在关联数组中吗？意思是每次切换回Insert Media都需要找对应的图片重新检查？如果您每次都要搜索数百个媒体项目怎么办...

我有感觉 下划线库 作为一个很好的选择可能会有所帮助，但还没有弄清楚如何使用它来使一切尽可能顺利和快速......看起来WordPress甚至没有“刷新”媒体项目。谁能给我一些建议来模仿这种行为？

Answer 1

一个简单的方法是:

图库 View 中的每个项目都有一个唯一的 ID(例如来自 wordpress 的实际 ID)。例如，它可以存储为 data-attribute 或 html id 属性。

然后，您有单独的数组来存储每个选项卡的选定项目的 ID(插入媒体/特色图像)

当用户单击一个项目时，该项目的 ID 将添加(或删除)到他正在查看的选项卡的相应数组中

当用户切换选项卡时，您首先取消选择图库中的所有内容(删除将它们标记为选中的类)，然后浏览相应的数组并重新选择该列表中的内容。

当然，我确信 Wordpress 正在做一些更精致的事情，比如将它从 AJAX 请求中获得的所有图像的列表存储为对象，然后在该列表上执行这些操作，并在基于图库 View 中显示/隐藏项目在您选择的选项卡上。但总体思路是一样的。