如何使用图形填充流星集合并单独显示它们

Question

我正在尝试添加一项功能，允许我在网页周围拖动小图形（想想20x20px）。应该有一个包含所有图标的列表，通过单击它们并双击页面背景，可以在可拖动的页面上生成副本。

拖动是通过jquery-ui完成的并且有效。现在我想知道如何将图像放入集合中。

我想要做的是有一个集合可以方便地显示所有可用的图标，另一个用于处理正在使用的图标。

以下是后者的模板：

<template name="usedIcon">
<div draggable="true" class="draggableImageDiv" id="{{_id}}" style="position:absolute;left:{{left}};top:{{top}};">
    <img src="{{imagePath}}" class="draggableImage" alt="test-image" />
</div>

这适用于设定的图像路径。但是现在我打算为availableIcon类创建一个事件处理程序，它在单击时设置某个变量中的图像路径，然后允许该变量用于在usedIcons集合中插入具有特定imagepath的新对象。

为此，我需要先将路径插入availableIcons集合

是否有方便的方法使用imagePath变量填充availableIcons集合？我想在启动功能中手动完成它，这不是很优雅。 CollectionsFS可能做得更好，也比使用路径更优雅，但我没有任何想法如何去做。

Answer 1

我建议查看meteor可用的CollectionFS包。您也需要cfs：standard-packages，但gridfs允许您轻松地将所有图像放入集合中并获取它们的URL。

希望有所帮助。